(error = message)} />

Only the people you add can see this gallery. It isn't public, and it doesn't appear in feeds or search.

{#if spaces.isSuccess && !spaces.data?.supported}

Private galleries aren't available for your account yet, so this can't be published.

{/if} {#if photos.length > 0}

{#each photos as photo, i (photo.dataUrl)}

{/each}

{/if}

</Field>

<Field label="Who can see it">
    <Textarea bind:value={memberText} rows={3} placeholder="@handle or did:plc:… (one per line)" />
  </Field>

{#if badMembers.length > 0}
    <p class="error">Not a handle or DID: {badMembers.join(', ')}</p>
  {:else}
    <p class="hint">
      {members.length
        ? `${members.length} reader${members.length === 1 ? '' : 's'}, plus you.`
        : 'Only you, until you add someone.'}
    </p>
  {/if}

{#if error}
    <p class="error">{error}</p>
  {/if}

<Button onclick={publish} disabled={!canPublish}>
    {publishing ? 'Publishing…' : 'Create private gallery'}
  </Button>
</div>

<style>
  .page {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .lede {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
  }
  .hint {
    margin: -8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
  }
  .warning {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-primary);
  }
  .thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .thumb {
    position: relative;
    width: 72px;
    height: 72px;
  }
  .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  .remove {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg);
    cursor: pointer;
  }
  .error {
    margin: -8px 0 0;
    font-size: 13px;
    color: var(--danger);
  }
</style>