@things-factory/gallery 10.1.233 → 10.1.236

package/dist-client/components/gallery-show.js

@@ -0,0 +1,316 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * The gallery's photos across the whole window, one at a time (ADR-0165 decision 9): seen large from a post, played as
+ * a slideshow from the gallery, and the screen saver after the person has been away. One show for the three - what
+ * differs is where it starts, whether it plays, and whether anything the person does closes it (the saver).
+ */
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { galleryApi } from '../utils/gallery-api.js';
+import { day, t } from '../utils/gallery-words.js';
+/** How long one photo stays while it plays. */
+const DWELL = 7000;
+/** The most photos one show walks through - pages of the gallery's own size are asked until this. */
+const MOST = 300;
+const PAGE = 60;
+let GalleryShow = class GalleryShow extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.saver = false;
+        this.frames = [];
+        this.at = 0;
+        this.playing = false;
+        this.loaded = false;
+        this.wholeScreen = false;
+        this.disposed = false;
+        this.onKey = (e) => {
+            if (this.saver)
+                return;
+            const handled = {
+                ArrowLeft: () => this.step(-1),
+                ArrowRight: () => this.step(1),
+                ' ': () => this.play(!this.playing),
+                Escape: () => this.close()
+            };
+            const act = handled[e.key];
+            if (!act)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            act();
+        };
+        /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */
+        this.onFullscreen = () => {
+            if (this.wholeScreen && !document.fullscreenElement)
+                this.close();
+        };
+        this.onWake = (e) => {
+            /* The pointer resting on the screen still says it moved, by a pixel or so - a real move is farther. */
+            if (e.type === 'pointermove' && Math.abs(e.movementX) + Math.abs(e.movementY) < 4)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.close();
+        };
+    }
+    static { this.styles = css `
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      display: block;
+      background: #000;
+      color: #fff;
+      user-select: none;
+    }
+    :host([saver]) {
+      cursor: none;
+    }
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: appear 800ms ease-out;
+    }
+    @keyframes appear {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    .about {
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      padding: 48px 24px 20px;
+      background: linear-gradient(transparent, rgb(0 0 0 / 60%));
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .about .caption {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: pre-wrap;
+      font-size: 16px;
+    }
+    .about .who {
+      opacity: 0.75;
+    }
+    .bar {
+      position: absolute;
+      top: 12px;
+      inset-inline-end: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .bar .count {
+      padding: 0 8px;
+      font-size: 13px;
+      opacity: 0.8;
+    }
+    button {
+      display: inline-flex;
+      padding: 8px;
+      border: 0;
+      border-radius: 50%;
+      background: rgb(0 0 0 / 45%);
+      color: #fff;
+      cursor: pointer;
+    }
+    button:hover {
+      background: rgb(255 255 255 / 20%);
+    }
+    .turn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .previous {
+      inset-inline-start: 12px;
+    }
+    .next {
+      inset-inline-end: 12px;
+    }
+    .empty {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.8;
+    }
+  `; }
+    /** Opens a show over the whole window, and the whole screen when the browser lets it. */
+    static open(options) {
+        const show = document.createElement('gallery-show');
+        show.options = options;
+        document.body.appendChild(show);
+        return show;
+    }
+    render() {
+        const frame = this.frames[this.at];
+        if (!frame)
+            return this.loaded
+                ? html `<div class="empty">${t('gallery.text.show-empty')}</div>${this.saver ? nothing : this.renderBar()}`
+                : nothing;
+        const { post, photo } = frame;
+        return html `
+      ${ /* A new element for each photo, so it fades in. */[photo.id].map(() => html `<img src=${photo.fullpath} alt=${post.caption ?? ''} />`)}
+      <div class="about">
+        ${post.caption ? html `<div class="caption">${post.caption}</div>` : nothing}
+        <div class="who">${post.creator?.name ?? ''} · ${day(post.takenAt)}${post.event ? ` · ${post.event.name}` : ''}</div>
+      </div>
+      ${this.saver
+            ? nothing
+            : html `${this.renderBar()}
+              ${this.frames.length > 1
+                ? html `<button class="turn previous" aria-label=${t('gallery.button.previous')} @click=${() => this.step(-1)}>
+                      <md-icon>chevron_left</md-icon>
+                    </button>
+                    <button class="turn next" aria-label=${t('gallery.button.next')} @click=${() => this.step(1)}>
+                      <md-icon>chevron_right</md-icon>
+                    </button>`
+                : nothing}`}
+    `;
+    }
+    renderBar() {
+        return html `<div class="bar">
+      ${this.frames.length ? html `<span class="count">${this.at + 1} / ${this.frames.length}</span>` : nothing}
+      ${this.frames.length > 1
+            ? html `<button
+              aria-label=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              title=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              @click=${() => this.play(!this.playing)}
+            >
+              <md-icon>${this.playing ? 'pause' : 'play_arrow'}</md-icon>
+            </button>`
+            : nothing}
+      <button aria-label=${t('gallery.button.close')} title=${t('gallery.button.close')} @click=${() => this.close()}>
+        <md-icon>close</md-icon>
+      </button>
+    </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.saver = !!this.options?.saver;
+        window.addEventListener('keydown', this.onKey, true);
+        document.addEventListener('fullscreenchange', this.onFullscreen);
+        if (this.saver)
+            for (const name of WAKE)
+                window.addEventListener(name, this.onWake, true);
+        /* The whole screen needs the press that opened it - the saver has none, and covers the window only. */
+        if (!this.saver && this.requestFullscreen)
+            this.requestFullscreen()
+                .then(() => (this.wholeScreen = true))
+                .catch(() => { });
+        this.load();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.disposed = true;
+        clearTimeout(this.timer);
+        window.removeEventListener('keydown', this.onKey, true);
+        document.removeEventListener('fullscreenchange', this.onFullscreen);
+        for (const name of WAKE)
+            window.removeEventListener(name, this.onWake, true);
+    }
+    async load() {
+        const { filter, start, saver } = this.options;
+        const frames = [];
+        try {
+            for (let skip = 0; frames.length < MOST; skip += PAGE) {
+                const page = await galleryApi.posts(filter, skip, PAGE);
+                for (const post of page.items)
+                    if (!post.hiddenAt)
+                        for (const photo of post.photos)
+                            frames.push({ post, photo });
+                if (this.disposed || skip + PAGE >= page.total)
+                    break;
+            }
+        }
+        catch {
+            /* The show has what came; a saver with nothing closes itself below. */
+        }
+        if (this.disposed)
+            return;
+        if (saver)
+            shuffle(frames);
+        this.frames = frames.slice(0, MOST);
+        const found = start ? this.frames.findIndex(one => one.post.id === start.postId) : -1;
+        this.at = found < 0 ? 0 : Math.min(found + start.index, this.frames.length - 1);
+        this.loaded = true;
+        if (saver && !this.frames.length)
+            return this.close();
+        this.play(!!this.options.playing || !!saver);
+    }
+    play(on) {
+        this.playing = on;
+        this.schedule();
+    }
+    /** The next photo after the dwell, asked ahead so it is there when it turns. */
+    schedule() {
+        clearTimeout(this.timer);
+        if (!this.playing || this.frames.length < 2)
+            return;
+        const next = this.frames[(this.at + 1) % this.frames.length];
+        new Image().src = next.photo.fullpath;
+        this.timer = setTimeout(() => this.step(1), DWELL);
+    }
+    step(by) {
+        const count = this.frames.length;
+        if (!count)
+            return;
+        this.at = (this.at + by + count) % count;
+        this.schedule();
+    }
+    close() {
+        if (this.disposed)
+            return;
+        if (this.wholeScreen && document.fullscreenElement)
+            document.exitFullscreen().catch(() => { });
+        this.remove();
+        this.dispatchEvent(new CustomEvent('closed'));
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "saver", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryShow.prototype, "frames", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "at", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "playing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryShow.prototype, "loaded", void 0);
+GalleryShow = __decorate([
+    customElement('gallery-show')
+], GalleryShow);
+export { GalleryShow };
+/** What wakes the screen from the saver. */
+const WAKE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart'];
+function shuffle(list) {
+    for (let i = list.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [list[i], list[j]] = [list[j], list[i]];
+    }
+}
+//# sourceMappingURL=gallery-show.js.map

package/dist-client/components/gallery-show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-show.js","sourceRoot":"","sources":["../../client/components/gallery-show.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * The gallery's photos across the whole window, one at a time (ADR-0165 decision 9): seen large from a post, played as\n * a slideshow from the gallery, and the screen saver after the person has been away. One show for the three - what\n * differs is where it starts, whether it plays, and whether anything the person does closes it (the saver).\n */\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { galleryApi, type Filter, type Photo, type Post } from '../utils/gallery-api.js'\nimport { day, t } from '../utils/gallery-words.js'\n\n/** How long one photo stays while it plays. */\nconst DWELL = 7000\n/** The most photos one show walks through - pages of the gallery's own size are asked until this. */\nconst MOST = 300\nconst PAGE = 60\n\ntype Frame = { post: Post; photo: Photo }\n\nexport type ShowOptions = {\n  /** The posts the show walks through - the gallery's narrowing where it was opened. */\n  filter: Filter\n  /** Where it starts: a post and the photo in it. Without it, the first photo. */\n  start?: { postId: string; index: number }\n  /** Plays at once. */\n  playing?: boolean\n  /** The screen saver: plays in a random order, and closes at anything the person does. */\n  saver?: boolean\n}\n\n@customElement('gallery-show')\nexport class GalleryShow extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: fixed;\n      inset: 0;\n      z-index: 10000;\n      display: block;\n      background: #000;\n      color: #fff;\n      user-select: none;\n    }\n    :host([saver]) {\n      cursor: none;\n    }\n    img {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      animation: appear 800ms ease-out;\n    }\n    @keyframes appear {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n    .about {\n      position: absolute;\n      inset-inline: 0;\n      bottom: 0;\n      padding: 48px 24px 20px;\n      background: linear-gradient(transparent, rgb(0 0 0 / 60%));\n      font-size: 14px;\n      line-height: 1.5;\n    }\n    .about .caption {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      white-space: pre-wrap;\n      font-size: 16px;\n    }\n    .about .who {\n      opacity: 0.75;\n    }\n    .bar {\n      position: absolute;\n      top: 12px;\n      inset-inline-end: 12px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .bar .count {\n      padding: 0 8px;\n      font-size: 13px;\n      opacity: 0.8;\n    }\n    button {\n      display: inline-flex;\n      padding: 8px;\n      border: 0;\n      border-radius: 50%;\n      background: rgb(0 0 0 / 45%);\n      color: #fff;\n      cursor: pointer;\n    }\n    button:hover {\n      background: rgb(255 255 255 / 20%);\n    }\n    .turn {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n    .previous {\n      inset-inline-start: 12px;\n    }\n    .next {\n      inset-inline-end: 12px;\n    }\n    .empty {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.8;\n    }\n  `\n\n  /** Opens a show over the whole window, and the whole screen when the browser lets it. */\n  static open(options: ShowOptions): GalleryShow {\n    const show = document.createElement('gallery-show') as GalleryShow\n    show.options = options\n    document.body.appendChild(show)\n    return show\n  }\n\n  @property({ type: Boolean, reflect: true }) saver = false\n  options!: ShowOptions\n\n  @state() private frames: Frame[] = []\n  @state() private at = 0\n  @state() private playing = false\n  @state() private loaded = false\n\n  private timer?: ReturnType<typeof setTimeout>\n  private wholeScreen = false\n  private disposed = false\n\n  render() {\n    const frame = this.frames[this.at]\n    if (!frame)\n      return this.loaded\n        ? html`<div class=\"empty\">${t('gallery.text.show-empty')}</div>${this.saver ? nothing : this.renderBar()}`\n        : nothing\n    const { post, photo } = frame\n    return html`\n      ${/* A new element for each photo, so it fades in. */ [photo.id].map(() => html`<img src=${photo.fullpath} alt=${post.caption ?? ''} />`)}\n      <div class=\"about\">\n        ${post.caption ? html`<div class=\"caption\">${post.caption}</div>` : nothing}\n        <div class=\"who\">${post.creator?.name ?? ''} · ${day(post.takenAt)}${post.event ? ` · ${post.event.name}` : ''}</div>\n      </div>\n      ${\n        this.saver\n          ? nothing\n          : html`${this.renderBar()}\n              ${this.frames.length > 1\n                ? html`<button class=\"turn previous\" aria-label=${t('gallery.button.previous')} @click=${() => this.step(-1)}>\n                      <md-icon>chevron_left</md-icon>\n                    </button>\n                    <button class=\"turn next\" aria-label=${t('gallery.button.next')} @click=${() => this.step(1)}>\n                      <md-icon>chevron_right</md-icon>\n                    </button>`\n                : nothing}`\n      }\n    `\n  }\n\n  private renderBar() {\n    return html`<div class=\"bar\">\n      ${this.frames.length ? html`<span class=\"count\">${this.at + 1} / ${this.frames.length}</span>` : nothing}\n      ${\n        this.frames.length > 1\n          ? html`<button\n              aria-label=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}\n              title=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}\n              @click=${() => this.play(!this.playing)}\n            >\n              <md-icon>${this.playing ? 'pause' : 'play_arrow'}</md-icon>\n            </button>`\n          : nothing\n      }\n      <button aria-label=${t('gallery.button.close')} title=${t('gallery.button.close')} @click=${() => this.close()}>\n        <md-icon>close</md-icon>\n      </button>\n    </div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.saver = !!this.options?.saver\n    window.addEventListener('keydown', this.onKey, true)\n    document.addEventListener('fullscreenchange', this.onFullscreen)\n    if (this.saver) for (const name of WAKE) window.addEventListener(name, this.onWake, true)\n    /* The whole screen needs the press that opened it - the saver has none, and covers the window only. */\n    if (!this.saver && this.requestFullscreen)\n      this.requestFullscreen()\n        .then(() => (this.wholeScreen = true))\n        .catch(() => {})\n    this.load()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.disposed = true\n    clearTimeout(this.timer)\n    window.removeEventListener('keydown', this.onKey, true)\n    document.removeEventListener('fullscreenchange', this.onFullscreen)\n    for (const name of WAKE) window.removeEventListener(name, this.onWake, true)\n  }\n\n  private async load() {\n    const { filter, start, saver } = this.options\n    const frames: Frame[] = []\n    try {\n      for (let skip = 0; frames.length < MOST; skip += PAGE) {\n        const page = await galleryApi.posts(filter, skip, PAGE)\n        for (const post of page.items) if (!post.hiddenAt) for (const photo of post.photos) frames.push({ post, photo })\n        if (this.disposed || skip + PAGE >= page.total) break\n      }\n    } catch {\n      /* The show has what came; a saver with nothing closes itself below. */\n    }\n    if (this.disposed) return\n    if (saver) shuffle(frames)\n    this.frames = frames.slice(0, MOST)\n    const found = start ? this.frames.findIndex(one => one.post.id === start.postId) : -1\n    this.at = found < 0 ? 0 : Math.min(found + start!.index, this.frames.length - 1)\n    this.loaded = true\n    if (saver && !this.frames.length) return this.close()\n    this.play(!!this.options.playing || !!saver)\n  }\n\n  private play(on: boolean) {\n    this.playing = on\n    this.schedule()\n  }\n\n  /** The next photo after the dwell, asked ahead so it is there when it turns. */\n  private schedule() {\n    clearTimeout(this.timer)\n    if (!this.playing || this.frames.length < 2) return\n    const next = this.frames[(this.at + 1) % this.frames.length]\n    new Image().src = next.photo.fullpath\n    this.timer = setTimeout(() => this.step(1), DWELL)\n  }\n\n  private step(by: number) {\n    const count = this.frames.length\n    if (!count) return\n    this.at = (this.at + by + count) % count\n    this.schedule()\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    if (this.saver) return\n    const handled: Record<string, () => void> = {\n      ArrowLeft: () => this.step(-1),\n      ArrowRight: () => this.step(1),\n      ' ': () => this.play(!this.playing),\n      Escape: () => this.close()\n    }\n    const act = handled[e.key]\n    if (!act) return\n    e.preventDefault()\n    e.stopPropagation()\n    act()\n  }\n\n  /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */\n  private onFullscreen = () => {\n    if (this.wholeScreen && !document.fullscreenElement) this.close()\n  }\n\n  private onWake = (e: Event) => {\n    /* The pointer resting on the screen still says it moved, by a pixel or so - a real move is farther. */\n    if (e.type === 'pointermove' && Math.abs((e as PointerEvent).movementX) + Math.abs((e as PointerEvent).movementY) < 4)\n      return\n    e.preventDefault()\n    e.stopPropagation()\n    this.close()\n  }\n\n  close() {\n    if (this.disposed) return\n    if (this.wholeScreen && document.fullscreenElement) document.exitFullscreen().catch(() => {})\n    this.remove()\n    this.dispatchEvent(new CustomEvent('closed'))\n  }\n}\n\n/** What wakes the screen from the saver. */\nconst WAKE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart']\n\nfunction shuffle<T>(list: T[]) {\n  for (let i = list.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1))\n    ;[list[i], list[j]] = [list[j], list[i]]\n  }\n}\n"]}

package/dist-client/components/gallery-uploader.d.ts

@@ -20,8 +20,12 @@ export declare class GalleryUploader extends GalleryUploader_base {
     private caption;
     private tags;
     private tagText;
+    /** Why the tag being typed was not taken - said under the tags, the text kept so it can be shortened. */
+    private tagRefusal;
     private suggestions;
     private chosenSpace;
+    /** A post of the own gallery is the person's alone until shared (decision 2) - off when posting. */
+    private shared;
     private chosenEvent;
     private takenOn;
     private choices;
@@ -44,6 +48,7 @@ export declare class GalleryUploader extends GalleryUploader_base {
     private chooseSpace;
     private typeTag;
     private tagKey;
+    /** Takes the typed tag, or says why not and keeps it - a longer tag was cut at 30 without a word (2026-10-30). */
     private addTag;
     private save;
     private close;

package/dist-client/components/gallery-uploader.js

@@ -21,6 +21,7 @@ import { shrunk, takenAtOf } from '../utils/photo-prep.js';
 const MAX_PHOTOS = 20;
 const MAX_CAPTION = 500;
 const MAX_TAGS = 10;
+const MAX_TAG = 30;
 /* The events shown before 「more」 - the near ones are among them. */
 const FIRST_CHOICES = 4;
 /** yyyy-mm-dd of a date in the reader's own time. */
@@ -37,8 +38,12 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
         this.caption = '';
         this.tags = [];
         this.tagText = '';
+        /** Why the tag being typed was not taken - said under the tags, the text kept so it can be shortened. */
+        this.tagRefusal = '';
         this.suggestions = [];
         this.chosenSpace = 'COMPANY';
+        /** A post of the own gallery is the person's alone until shared (decision 2) - off when posting. */
+        this.shared = false;
         this.chosenEvent = null;
         this.takenOn = dateText(new Date());
         this.choices = [];
@@ -142,6 +147,10 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
         font-size: var(--ui-t-small, 12px);
         color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
       }
+      .refusal {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--md-sys-color-error);
+      }
       .chips {
         display: flex;
         flex-wrap: wrap;
@@ -287,6 +296,7 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
                   />`
             : nothing}
           </div>
+          ${this.tagRefusal ? html `<div class="refusal" role="alert">${this.tagRefusal}</div>` : nothing}
           ${this.suggestions.length
             ? html `<div class="chips suggest">
                   ${this.suggestions.filter(one => !this.tags.some(tag => tag.toLowerCase() === one.tag.toLowerCase())).map(one => html `<button class="chip" @mousedown=${(e) => e.preventDefault()} @click=${() => this.addTag(one.tag)}>#${one.tag}</button>`)}
@@ -333,7 +343,18 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
                 : nothing}
                 </div>
               </section>`
-            : html `<div class="muted">${t('gallery.text.personal-note')}</div>`}
+            : html `<section>
+                <h4>${t('gallery.field.shared')}</h4>
+                <div class="chips">
+                  <button class="chip" aria-pressed=${String(!this.shared)} @click=${() => (this.shared = false)}>
+                    <md-icon>lock</md-icon>${t('gallery.text.only-me')}
+                  </button>
+                  <button class="chip" aria-pressed=${String(this.shared)} @click=${() => (this.shared = true)}>
+                    <md-icon>group</md-icon>${t('gallery.text.everyone')}
+                  </button>
+                </div>
+                <div class="muted">${t(this.shared ? 'gallery.text.shared-note' : 'gallery.text.only-me-note')}</div>
+              </section>`}
       </div>
       <ox-popup-actions>
         <md-text-button slot="cancel" ?disabled=${this.busy} @click=${() => this.close()}
@@ -362,6 +383,7 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
             this.caption = post.caption ?? '';
             this.tags = [...(post.tags ?? [])];
             this.chosenSpace = post.space;
+            this.shared = post.shared;
             this.chosenEvent = post.event?.id ?? null;
             this.takenOn = dateText(new Date(post.takenAt));
         }
@@ -465,20 +487,29 @@ let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement
             this.tags = this.tags.slice(0, -1);
         }
     }
+    /** Takes the typed tag, or says why not and keeps it - a longer tag was cut at 30 without a word (2026-10-30). */
     addTag(raw) {
         const tag = raw.replace(/[,]/g, ' ').trim().replace(/^#+/, '').replace(/\s+/g, ' ').trim();
+        if (tag.length > MAX_TAG) {
+            this.tagRefusal = t('gallery.text.tag-too-long-typed', { max: MAX_TAG, length: tag.length });
+            return false;
+        }
+        this.tagRefusal = '';
         this.tagText = '';
         if (!tag || this.tags.length >= MAX_TAGS || this.tags.some(one => one.toLowerCase() === tag.toLowerCase()))
-            return;
-        this.tags = [...this.tags, tag.slice(0, 30)];
+            return true;
+        this.tags = [...this.tags, tag];
+        return true;
     }
     async save() {
-        this.addTag(this.tagText);
+        if (!this.addTag(this.tagText))
+            return;
         this.busy = true;
         try {
             const files = await Promise.all(this.added.map(one => shrunk(one.file)));
             const input = {
                 space: this.chosenSpace,
+                shared: this.chosenSpace === 'PERSONAL' && this.shared,
                 caption: this.caption.trim(),
                 takenAt: this.takenAt(),
                 tags: this.tags,
@@ -541,6 +572,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], GalleryUploader.prototype, "tagText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "tagRefusal", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
@@ -549,6 +584,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], GalleryUploader.prototype, "chosenSpace", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "shared", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)