@k2b/ui 0.44.0 → 0.46.0

package/dist/browser/layout/DetailSections.js

@@ -0,0 +1,1019 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__face><!$><!/><span class=k2b-detail-presence__dot aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__swatch aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<strong>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-detail-presence__chip><span aria-hidden=true class=k2b-detail-presence__chip-content>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__chip><span class=k2b-sr-only></span><span aria-hidden=true class=k2b-detail-presence__chip-content>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-detail-presence__strip><div class=k2b-detail-presence__chips></div><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<p class="k2b-detail-presence__where k2b-truncate-fade">`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-detail-presence>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class="k2b-detail-presence__strip k2b-detail-presence__problem"role=status><i class="ti ti-alert-triangle"aria-hidden=true></i><span class=k2b-truncate-fade></span><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-detail-presence__strip aria-hidden=true><span class=k2b-detail-presence__skeleton></span><span class=k2b-detail-presence__skeleton></span><span class=k2b-detail-presence__skeleton>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<p class=k2b-detail-presence__where><span class=k2b-detail-presence__skeleton-line aria-hidden=true></span><span class=k2b-sr-only role=status>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<i class="ti ti-refresh"aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__more>+<!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__self><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence-slot__more>+<!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-detail-presence-slot aria-hidden=true><!$><!/><!$><!/>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-sr-only role=status>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-error role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><!$><!/>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<p class=k2b-detail-section-note>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-detail-row-skeleton__face>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-detail-row-skeleton>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<i class="ti ti-settings"aria-hidden=true>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-group><div class=k2b-detail-section-label></div><!$><!/><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows><!$><!/><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<dl class=k2b-detail-properties>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__leading>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-detail-properties__item><dt></dt><dd><!$><!/><!$><!/>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__value>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<a class="k2b-detail-properties__value k2b-detail-properties__link">`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<ul class=k2b-detail-tags>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<li>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-detail-tag>#<!$><!/>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<a class=k2b-detail-tag>#<!$><!/>`);
+import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { Avatar } from "../surfaces/Avatar";
+import { AvatarStack } from "../surfaces/AvatarStack";
+import { personColor } from "../surfaces/person-color";
+import DetailPanel from "./DetailPanel";
+import { useDetailPanelMessages } from "./detail-panel-messages";
+import { useDetailSectionMessages } from "./detail-sections-messages";
+
+/*
+ * Shared sections of an object's detail panel. Each one is a `DetailPanel.Section` with its icon, title, and count, so
+ * its content starts on the title's text edge, and each keeps its height while its data changes. Apps pass data; the
+ * order of sections is a convention (see the DetailPanel UI context).
+ */
+
+const listNames = (names, and) => names.length <= 1 ? names[0] ?? "" : `${names.slice(0, -1).join(", ")} ${and} ${names.at(-1)}`;
+
+// ── Presence ────────────────────────────────────────────────────────────
+
+/** `offline` keeps the last known people, pale and without live dots; `unavailable` offers `onRetry`. */
+
+const PresenceFace = props => (() => {
+  var _el$ = _$getNextElement(_tmpl$),
+    _el$3 = _el$.firstChild,
+    [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+    _el$2 = _el$4.nextSibling;
+  _$insert(_el$, _$createComponent(Avatar, {
+    get name() {
+      return props.person.name;
+    },
+    get src() {
+      return props.person.src;
+    },
+    get icon() {
+      return props.person.icon;
+    },
+    get shape() {
+      return props.person.shape;
+    },
+    size: "xs",
+    alt: ""
+  }), _el$4, _co$);
+  _$effect(() => _$setAttribute(_el$, "data-live", props.live ? "true" : undefined));
+  return _el$;
+})();
+
+/**
+ * "Here now": who has the object open, what they do, and where. Always two lines tall in every state, so people
+ * coming, going, or moving never shift the panel. Chips that do not fit wrap into a hidden line and count as "+n";
+ * "+n" and "You" open the full list, which `AvatarStack` shows beside it or as a sheet on phones.
+ */
+export function DetailPresence(props) {
+  const t = useDetailSectionMessages();
+  const state = () => props.state ?? "live";
+  const others = createMemo(() => props.people.filter(person => !person.self));
+  const self = createMemo(() => props.people.find(person => person.self));
+  const short = person => person.shortName ?? person.name;
+  const color = person => person.color ?? personColor(person.name);
+  const [hidden, setHidden] = createSignal(0);
+  let chips;
+
+  // Chips that do not fit wrap into the clipped second line; they leave the tab order and count as "+n".
+  const fit = () => {
+    if (!chips) return;
+    const all = Array.from(chips.children).filter(child => child instanceof HTMLElement);
+    const top = all[0]?.offsetTop ?? 0;
+    let wrapped = 0;
+    for (const chip of all) {
+      const out = chip.offsetTop > top;
+      chip.inert = out;
+      if (out) wrapped += 1;
+    }
+    setHidden(wrapped);
+  };
+  // The strip mounts again after loading or an outage, so each mounted strip watches itself.
+  const watchChips = element => {
+    chips = element;
+    if (typeof ResizeObserver === "undefined") return;
+    const resized = new ResizeObserver(fit);
+    resized.observe(element);
+    const changed = new MutationObserver(fit);
+    changed.observe(element, {
+      childList: true
+    });
+    queueMicrotask(fit);
+    onCleanup(() => {
+      resized.disconnect();
+      changed.disconnect();
+    });
+  };
+  const describe = person => person.activity === "writing" ? t().personWriting({
+    name: person.name,
+    place: person.place ?? ""
+  }) : t().personReading({
+    name: person.name
+  });
+  const listPeople = createMemo(() => props.people.map(person => ({
+    id: person.id,
+    name: person.self ? t().you : person.name,
+    src: person.src,
+    icon: person.icon,
+    shape: person.shape,
+    self: person.self,
+    detailIcon: person.self ? undefined : person.activity === "writing" ? "ti ti-pencil" : "ti ti-eye",
+    detail: [person.self ? undefined : person.activity === "writing" ? t().writing : t().reading, person.place].filter(Boolean).join(" · "),
+    trailing: person.trailing,
+    onSelect: person.onSelect
+  })));
+  const where = () => {
+    if (state() === "offline" || others().length === 0) return props.note;
+    const writers = others().filter(person => person.activity === "writing");
+    const readers = others().filter(person => person.activity !== "writing");
+    return [_$createComponent(For, {
+      each: writers,
+      children: (person, index) => [_$memo(() => index() > 0 ? ", " : ""), (() => {
+        var _el$5 = _$getNextElement(_tmpl$2);
+        _$effect(_$p => _$setStyleProperty(_el$5, "--k2b-person-color", color(person)));
+        return _el$5;
+      })(), (() => {
+        var _el$6 = _$getNextElement(_tmpl$3);
+        _$insert(_el$6, () => short(person));
+        return _el$6;
+      })(), _$createComponent(Show, {
+        get when() {
+          return person.place;
+        },
+        children: place => [" ", _$memo(() => t().writesIn), " ", _$memo(place)]
+      })]
+    }), _$createComponent(Show, {
+      get when() {
+        return _$memo(() => writers.length > 0)() && readers.length > 0;
+      },
+      children: " · "
+    }), _$createComponent(Show, {
+      get when() {
+        return readers.length > 0;
+      },
+      get children() {
+        return t().readingAlong({
+          names: listNames(readers.map(short), t().and),
+          count: readers.length
+        });
+      }
+    })];
+  };
+  const chip = person => {
+    const content = [_$createComponent(PresenceFace, {
+      person: person,
+      get live() {
+        return state() === "live";
+      }
+    }), _$memo(() => short(person)), (() => {
+      var _el$7 = _$getNextElement(_tmpl$4);
+      _$effect(_p$ => {
+        var _v$ = person.activity === "writing" ? "ti ti-pencil k2b-detail-presence__activity" : "ti ti-eye k2b-detail-presence__activity",
+          _v$2 = person.activity ?? "reading";
+        _v$ !== _p$.e && _$className(_el$7, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$7, "data-activity", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$7;
+    })()];
+    return _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!person.onSelect)() && state() === "live";
+      },
+      get fallback() {
+        return (() => {
+          var _el$0 = _$getNextElement(_tmpl$6),
+            _el$1 = _el$0.firstChild,
+            _el$10 = _el$1.nextSibling;
+          _$insert(_el$1, () => describe(person));
+          _$insert(_el$10, content);
+          _$effect(_p$ => {
+            var _v$6 = color(person),
+              _v$7 = describe(person);
+            _v$6 !== _p$.e && _$setStyleProperty(_el$0, "--k2b-person-color", _p$.e = _v$6);
+            _v$7 !== _p$.t && _$setAttribute(_el$0, "title", _p$.t = _v$7);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$0;
+        })();
+      },
+      get children() {
+        var _el$8 = _$getNextElement(_tmpl$5),
+          _el$9 = _el$8.firstChild;
+        _el$8.$$click = () => person.onSelect?.();
+        _$insert(_el$9, content);
+        _$effect(_p$ => {
+          var _v$3 = color(person),
+            _v$4 = describe(person),
+            _v$5 = t().jumpTo({
+              name: person.name,
+              place: person.place ?? ""
+            });
+          _v$3 !== _p$.e && _$setStyleProperty(_el$8, "--k2b-person-color", _p$.e = _v$3);
+          _v$4 !== _p$.t && _$setAttribute(_el$8, "title", _p$.t = _v$4);
+          _v$5 !== _p$.a && _$setAttribute(_el$8, "aria-label", _p$.a = _v$5);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        _$runHydrationEvents();
+        return _el$8;
+      }
+    });
+  };
+  const count = () => (state() === "live" || state() === "offline") && others().length > 0 ? others().length : undefined;
+  const meta = () => state() === "live" && others().length === 0 ? t().onlyYou : undefined;
+  return _$createComponent(DetailPanel.Section, {
+    get title() {
+      return props.title ?? t().hereNow;
+    },
+    icon: "ti ti-users",
+    get count() {
+      return count();
+    },
+    get meta() {
+      return meta();
+    },
+    get actions() {
+      return props.actions;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get children() {
+      var _el$11 = _$getNextElement(_tmpl$9);
+      _$insert(_el$11, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => state() !== "loading")() && state() !== "unavailable";
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return state() === "unavailable";
+            },
+            get fallback() {
+              return [_$getNextElement(_tmpl$1), (() => {
+                var _el$24 = _$getNextElement(_tmpl$10),
+                  _el$25 = _el$24.firstChild,
+                  _el$26 = _el$25.nextSibling;
+                _$insert(_el$26, () => t().presenceLoading);
+                return _el$24;
+              })()];
+            },
+            get children() {
+              return [(() => {
+                var _el$17 = _$getNextElement(_tmpl$0),
+                  _el$18 = _el$17.firstChild,
+                  _el$19 = _el$18.nextSibling,
+                  _el$20 = _el$19.nextSibling,
+                  [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling);
+                _$insert(_el$19, () => t().presenceUnavailable);
+                _$insert(_el$17, _$createComponent(Show, {
+                  get when() {
+                    return props.onRetry;
+                  },
+                  children: retry => _$createComponent(Button, {
+                    variant: "text",
+                    size: "xs",
+                    "class": "k2b-detail-presence__retry",
+                    onClick: () => retry()(),
+                    get children() {
+                      return [_$getNextElement(_tmpl$11), " ", _$memo(() => t().retry)];
+                    }
+                  })
+                }), _el$21, _co$3);
+                return _el$17;
+              })(), (() => {
+                var _el$22 = _$getNextElement(_tmpl$8);
+                _$insert(_el$22, () => props.note);
+                return _el$22;
+              })()];
+            }
+          });
+        },
+        get children() {
+          return [(() => {
+            var _el$12 = _$getNextElement(_tmpl$7),
+              _el$13 = _el$12.firstChild,
+              _el$14 = _el$13.nextSibling,
+              [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling);
+            _$use(watchChips, _el$13);
+            _$insert(_el$13, _$createComponent(For, {
+              get each() {
+                return others();
+              },
+              children: person => chip(person)
+            }));
+            _$insert(_el$12, _$createComponent(AvatarStack, {
+              "class": "k2b-detail-presence__all",
+              get people() {
+                return listPeople();
+              },
+              get title() {
+                return props.title ?? t().hereNow;
+              },
+              get label() {
+                return t().everyoneHere({
+                  count: props.people.length
+                });
+              },
+              get hint() {
+                return props.listHint;
+              },
+              get trigger() {
+                return [(() => {
+                  var _el$28 = _$getNextElement(_tmpl$12),
+                    _el$29 = _el$28.firstChild,
+                    _el$30 = _el$29.nextSibling,
+                    [_el$31, _co$4] = _$getNextMarker(_el$30.nextSibling);
+                  _$insert(_el$28, hidden, _el$31, _co$4);
+                  _$effect(() => _$setAttribute(_el$28, "data-empty", hidden() === 0 ? "true" : undefined));
+                  return _el$28;
+                })(), _$createComponent(Show, {
+                  get when() {
+                    return self();
+                  },
+                  children: person => (() => {
+                    var _el$32 = _$getNextElement(_tmpl$13),
+                      _el$33 = _el$32.firstChild,
+                      [_el$34, _co$5] = _$getNextMarker(_el$33.nextSibling),
+                      _el$35 = _el$34.nextSibling,
+                      [_el$36, _co$6] = _$getNextMarker(_el$35.nextSibling);
+                    _$insert(_el$32, _$createComponent(PresenceFace, {
+                      get person() {
+                        return person();
+                      },
+                      live: false
+                    }), _el$34, _co$5);
+                    _$insert(_el$32, () => t().you, _el$36, _co$6);
+                    return _el$32;
+                  })()
+                })];
+              }
+            }), _el$15, _co$2);
+            return _el$12;
+          })(), (() => {
+            var _el$16 = _$getNextElement(_tmpl$8);
+            _$insert(_el$16, where);
+            return _el$16;
+          })()];
+        }
+      }));
+      _$effect(_p$ => {
+        var _v$8 = state(),
+          _v$9 = state() === "loading" ? "true" : undefined;
+        _v$8 !== _p$.e && _$setAttribute(_el$11, "data-state", _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$11, "aria-busy", _p$.t = _v$9);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$11;
+    }
+  });
+}
+
+/** A fixed slot at the end of a row for the people working there, such as an outline heading. Always the same width. */
+export function DetailPresenceSlot(props) {
+  const max = () => Math.max(1, props.max ?? 2);
+  return (() => {
+    var _el$37 = _$getNextElement(_tmpl$15),
+      _el$42 = _el$37.firstChild,
+      [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+      _el$44 = _el$43.nextSibling,
+      [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling);
+    _$insert(_el$37, _$createComponent(For, {
+      get each() {
+        return props.people.slice(0, max());
+      },
+      children: person => _$createComponent(Avatar, {
+        get name() {
+          return person.name;
+        },
+        get src() {
+          return person.src;
+        },
+        get icon() {
+          return person.icon;
+        },
+        get shape() {
+          return person.shape;
+        },
+        size: "xs",
+        alt: ""
+      })
+    }), _el$43, _co$8);
+    _$insert(_el$37, _$createComponent(Show, {
+      get when() {
+        return props.people.length > max();
+      },
+      get children() {
+        var _el$38 = _$getNextElement(_tmpl$14),
+          _el$39 = _el$38.firstChild,
+          _el$40 = _el$39.nextSibling,
+          [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling);
+        _$insert(_el$38, () => props.people.length - max(), _el$41, _co$7);
+        return _el$38;
+      }
+    }), _el$45, _co$9);
+    return _el$37;
+  })();
+}
+
+// ── Access ──────────────────────────────────────────────────────────────
+
+const ACCESS_ICONS = {
+  person: undefined,
+  service: undefined,
+  group: "ti ti-users-group",
+  everyone: "ti ti-users",
+  public: "ti ti-world"
+};
+
+/**
+ * Who has access and with which role, read-only. Closed it names the first entries; open it lists `limit` rows and
+ * "Show n more". A list that may load later passes `state="loading"` and keeps its place.
+ */
+export function DetailAccess(props) {
+  const t = useDetailSectionMessages();
+  const panel = useDetailPanelMessages();
+  const [all, setAll] = createSignal(false);
+  const limit = () => Math.max(1, props.limit ?? 5);
+  const state = () => props.state ?? "ready";
+  const shown = () => all() ? props.entries : props.entries.slice(0, limit());
+  const hiddenCount = () => Math.max(0, props.entries.length - limit());
+  const nameOf = entry => entry.self ? t().you : entry.name;
+  const summary = () => {
+    if (state() === "loading") return t().accessLoading;
+    if (state() === "error") return t().accessFailed;
+    const names = props.entries.slice(0, 2).map(nameOf);
+    return names.length ? t().accessSummary({
+      names: names.join(", "),
+      more: Math.max(0, props.entries.length - 2)
+    }) : undefined;
+  };
+  const leading = entry => {
+    const kind = entry.kind ?? "person";
+    return _$createComponent(Avatar, {
+      get name() {
+        return entry.name;
+      },
+      get src() {
+        return kind === "person" ? entry.src : undefined;
+      },
+      get icon() {
+        return ACCESS_ICONS[kind];
+      },
+      shape: kind === "person" ? "circle" : "square",
+      size: "xs",
+      alt: ""
+    });
+  };
+  return _$createComponent(DetailPanel.Section, {
+    get title() {
+      return props.title ?? t().access;
+    },
+    icon: "ti ti-lock-access",
+    get count() {
+      return _$memo(() => state() === "ready")() ? props.entries.length : undefined;
+    },
+    collapsible: true,
+    get summary() {
+      return summary();
+    },
+    get defaultOpen() {
+      return props.defaultOpen;
+    },
+    get open() {
+      return props.open;
+    },
+    get onOpenChange() {
+      return props.onOpenChange;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get children() {
+      var _el$46 = _$getNextElement(_tmpl$19),
+        _el$54 = _el$46.firstChild,
+        [_el$55, _co$1] = _$getNextMarker(_el$54.nextSibling),
+        _el$56 = _el$55.nextSibling,
+        [_el$57, _co$10] = _$getNextMarker(_el$56.nextSibling),
+        _el$58 = _el$57.nextSibling,
+        [_el$59, _co$11] = _$getNextMarker(_el$58.nextSibling),
+        _el$60 = _el$59.nextSibling,
+        [_el$61, _co$12] = _$getNextMarker(_el$60.nextSibling),
+        _el$62 = _el$61.nextSibling,
+        [_el$63, _co$13] = _$getNextMarker(_el$62.nextSibling);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return state() === "loading";
+        },
+        get children() {
+          return [_$createComponent(For, {
+            each: [0, 1, 2],
+            children: () => _$createComponent(DetailPanel.Row, {
+              get leading() {
+                return _$getNextElement(_tmpl$20);
+              },
+              get title() {
+                return _$getNextElement(_tmpl$21);
+              }
+            })
+          }), (() => {
+            var _el$47 = _$getNextElement(_tmpl$16);
+            _$insert(_el$47, () => t().accessLoading);
+            return _el$47;
+          })()];
+        }
+      }), _el$55, _co$1);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return state() === "error";
+        },
+        get children() {
+          var _el$48 = _$getNextElement(_tmpl$17),
+            _el$49 = _el$48.firstChild,
+            _el$50 = _el$49.nextSibling,
+            _el$51 = _el$50.nextSibling,
+            [_el$52, _co$0] = _$getNextMarker(_el$51.nextSibling);
+          _$insert(_el$50, () => t().accessFailed);
+          _$insert(_el$48, _$createComponent(Show, {
+            get when() {
+              return props.onRetry;
+            },
+            children: retry => _$createComponent(Button, {
+              variant: "text",
+              size: "xs",
+              onClick: () => retry()(),
+              get children() {
+                return t().retry;
+              }
+            })
+          }), _el$52, _co$0);
+          return _el$48;
+        }
+      }), _el$57, _co$10);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return state() === "ready";
+        },
+        get children() {
+          return [_$createComponent(For, {
+            get each() {
+              return shown();
+            },
+            children: entry => _$createComponent(DetailPanel.Row, {
+              get leading() {
+                return leading(entry);
+              },
+              get title() {
+                return nameOf(entry);
+              },
+              get description() {
+                return entry.detail;
+              },
+              get trailing() {
+                return entry.role;
+              }
+            })
+          }), _$createComponent(Show, {
+            get when() {
+              return hiddenCount() > 0;
+            },
+            get children() {
+              return _$createComponent(DetailPanel.Action, {
+                type: "button",
+                get ["aria-expanded"]() {
+                  return all();
+                },
+                get leading() {
+                  return (() => {
+                    var _el$66 = _$getNextElement(_tmpl$4);
+                    _$effect(() => _$className(_el$66, all() ? "ti ti-chevron-up" : "ti ti-chevron-down"));
+                    return _el$66;
+                  })();
+                },
+                get title() {
+                  return _$memo(() => !!all())() ? panel().showLess : panel().showMore({
+                    count: hiddenCount()
+                  });
+                },
+                onClick: () => setAll(!all())
+              });
+            }
+          })];
+        }
+      }), _el$59, _co$11);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return props.manage;
+        },
+        children: manage => _$createComponent(Show, {
+          get when() {
+            return manage().href;
+          },
+          get fallback() {
+            return _$createComponent(DetailPanel.Action, {
+              type: "button",
+              get leading() {
+                return _$getNextElement(_tmpl$22);
+              },
+              get title() {
+                return manage().label;
+              },
+              onClick: () => manage().onClick?.()
+            });
+          },
+          children: href => _$createComponent(DetailPanel.Action, {
+            get href() {
+              return href();
+            },
+            get leading() {
+              return _$getNextElement(_tmpl$22);
+            },
+            get title() {
+              return manage().label;
+            }
+          })
+        })
+      }), _el$61, _co$12);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return props.note;
+        },
+        get children() {
+          var _el$53 = _$getNextElement(_tmpl$18);
+          _$insert(_el$53, () => props.note);
+          return _el$53;
+        }
+      }), _el$63, _co$13);
+      _$effect(() => _$setAttribute(_el$46, "aria-busy", state() === "loading" ? "true" : undefined));
+      return _el$46;
+    }
+  });
+}
+
+// ── Links ───────────────────────────────────────────────────────────────
+
+const LinkGroup = props => {
+  const panel = useDetailPanelMessages();
+  const [all, setAll] = createSignal(false);
+  const hiddenCount = () => Math.max(0, props.items.length - props.limit);
+  return (() => {
+    var _el$69 = _$getNextElement(_tmpl$23),
+      _el$70 = _el$69.firstChild,
+      _el$71 = _el$70.nextSibling,
+      [_el$72, _co$14] = _$getNextMarker(_el$71.nextSibling),
+      _el$73 = _el$72.nextSibling,
+      [_el$74, _co$15] = _$getNextMarker(_el$73.nextSibling);
+    _$insert(_el$70, () => props.label);
+    _$insert(_el$69, _$createComponent(For, {
+      get each() {
+        return _$memo(() => !!all())() ? props.items : props.items.slice(0, props.limit);
+      },
+      children: item => {
+        const shared = {
+          leading: (() => {
+            var _el$75 = _$getNextElement(_tmpl$4);
+            _$effect(() => _$className(_el$75, item.icon ?? "ti ti-file-text"));
+            return _el$75;
+          })(),
+          title: item.title,
+          trailing: item.trailing
+        };
+        return _$createComponent(Show, {
+          get when() {
+            return item.href;
+          },
+          get fallback() {
+            return _$createComponent(DetailPanel.Action, _$mergeProps({
+              type: "button",
+              onClick: event => item.onClick?.(event)
+            }, shared));
+          },
+          children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
+            get href() {
+              return href();
+            },
+            onClick: event => item.onClick?.(event)
+          }, shared))
+        });
+      }
+    }), _el$72, _co$14);
+    _$insert(_el$69, _$createComponent(Show, {
+      get when() {
+        return hiddenCount() > 0;
+      },
+      get children() {
+        return _$createComponent(DetailPanel.Action, {
+          type: "button",
+          get ["aria-expanded"]() {
+            return all();
+          },
+          get leading() {
+            return (() => {
+              var _el$76 = _$getNextElement(_tmpl$4);
+              _$effect(() => _$className(_el$76, all() ? "ti ti-chevron-up" : "ti ti-chevron-down"));
+              return _el$76;
+            })();
+          },
+          get title() {
+            return _$memo(() => !!all())() ? panel().showLess : panel().showMore({
+              count: hiddenCount()
+            });
+          },
+          onClick: () => setAll(!all())
+        });
+      }
+    }), _el$74, _co$15);
+    return _el$69;
+  })();
+};
+
+/** "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet". */
+export function DetailLinks(props) {
+  const t = useDetailSectionMessages();
+  const limit = () => Math.max(1, props.limit ?? 5);
+  const total = () => props.incoming.length + props.outgoing.length;
+  const summary = () => {
+    const names = items => ({
+      names: listNames(items.slice(0, 2).map(item => item.title), t().and),
+      more: Math.max(0, items.length - 2)
+    });
+    return props.incoming.length ? t().linkedBySummary(names(props.incoming)) : t().linksToSummary(names(props.outgoing));
+  };
+  return _$createComponent(Show, {
+    get when() {
+      return total() > 0;
+    },
+    get fallback() {
+      return _$createComponent(DetailPanel.Section, {
+        get title() {
+          return props.title ?? t().links;
+        },
+        icon: "ti ti-arrows-exchange",
+        count: 0,
+        get ["class"]() {
+          return props.class;
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(DetailPanel.Section, {
+        get title() {
+          return props.title ?? t().links;
+        },
+        icon: "ti ti-arrows-exchange",
+        get count() {
+          return total();
+        },
+        collapsible: true,
+        get defaultOpen() {
+          return props.defaultOpen ?? true;
+        },
+        get summary() {
+          return summary();
+        },
+        get ["class"]() {
+          return props.class;
+        },
+        get children() {
+          var _el$77 = _$getNextElement(_tmpl$24),
+            _el$78 = _el$77.firstChild,
+            [_el$79, _co$16] = _$getNextMarker(_el$78.nextSibling),
+            _el$80 = _el$79.nextSibling,
+            [_el$81, _co$17] = _$getNextMarker(_el$80.nextSibling);
+          _$insert(_el$77, _$createComponent(Show, {
+            get when() {
+              return props.incoming.length > 0;
+            },
+            get children() {
+              return _$createComponent(LinkGroup, {
+                get label() {
+                  return t().linkedBy({
+                    count: props.incoming.length
+                  });
+                },
+                get items() {
+                  return props.incoming;
+                },
+                get limit() {
+                  return limit();
+                }
+              });
+            }
+          }), _el$79, _co$16);
+          _$insert(_el$77, _$createComponent(Show, {
+            get when() {
+              return props.outgoing.length > 0;
+            },
+            get children() {
+              return _$createComponent(LinkGroup, {
+                get label() {
+                  return t().linksTo({
+                    count: props.outgoing.length
+                  });
+                },
+                get items() {
+                  return props.outgoing;
+                },
+                get limit() {
+                  return limit();
+                }
+              });
+            }
+          }), _el$81, _co$17);
+          return _el$77;
+        }
+      });
+    }
+  });
+}
+
+// ── Properties ──────────────────────────────────────────────────────────
+
+/** Facts about the object as label and value rows, such as created, edited, size, and the way to its history. */
+export function DetailProperties(props) {
+  const t = useDetailSectionMessages();
+  return _$createComponent(DetailPanel.Section, {
+    get title() {
+      return props.title ?? t().properties;
+    },
+    get icon() {
+      return props.icon ?? "ti ti-info-square";
+    },
+    collapsible: true,
+    get defaultOpen() {
+      return props.defaultOpen;
+    },
+    get summary() {
+      return props.summary;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get children() {
+      var _el$82 = _$getNextElement(_tmpl$25);
+      _$insert(_el$82, _$createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: item => (() => {
+          var _el$83 = _$getNextElement(_tmpl$27),
+            _el$84 = _el$83.firstChild,
+            _el$85 = _el$84.nextSibling,
+            _el$87 = _el$85.firstChild,
+            [_el$88, _co$18] = _$getNextMarker(_el$87.nextSibling),
+            _el$89 = _el$88.nextSibling,
+            [_el$90, _co$19] = _$getNextMarker(_el$89.nextSibling);
+          _$insert(_el$84, () => item.label);
+          _$insert(_el$85, _$createComponent(Show, {
+            get when() {
+              return item.leading;
+            },
+            get children() {
+              var _el$86 = _$getNextElement(_tmpl$26);
+              _$insert(_el$86, () => item.leading);
+              return _el$86;
+            }
+          }), _el$88, _co$18);
+          _$insert(_el$85, _$createComponent(Show, {
+            get when() {
+              return item.href;
+            },
+            get fallback() {
+              return (() => {
+                var _el$91 = _$getNextElement(_tmpl$28);
+                _$insert(_el$91, () => item.value);
+                return _el$91;
+              })();
+            },
+            children: href => (() => {
+              var _el$92 = _$getNextElement(_tmpl$29);
+              _$insert(_el$92, () => item.value);
+              _$effect(() => _$setAttribute(_el$92, "href", href()));
+              return _el$92;
+            })()
+          }), _el$90, _co$19);
+          return _el$83;
+        })()
+      }));
+      return _el$82;
+    }
+  });
+}
+
+// ── Tags ────────────────────────────────────────────────────────────────
+
+/** The object's tags as chips; a chip with `href` leads to everything with that tag. */
+export function DetailTags(props) {
+  const t = useDetailSectionMessages();
+  return _$createComponent(DetailPanel.Section, {
+    get title() {
+      return props.title ?? t().tags;
+    },
+    icon: "ti ti-hash",
+    get count() {
+      return props.tags.length;
+    },
+    get ["class"]() {
+      return props.class;
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.tags.length > 0;
+        },
+        get fallback() {
+          return _$memo(() => !!props.emptyHint)() ? (() => {
+            var _el$94 = _$getNextElement(_tmpl$18);
+            _$insert(_el$94, () => props.emptyHint);
+            return _el$94;
+          })() : undefined;
+        },
+        get children() {
+          var _el$93 = _$getNextElement(_tmpl$30);
+          _$insert(_el$93, _$createComponent(For, {
+            get each() {
+              return props.tags;
+            },
+            children: tag => (() => {
+              var _el$95 = _$getNextElement(_tmpl$31);
+              _$insert(_el$95, _$createComponent(Show, {
+                get when() {
+                  return tag.href;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$96 = _$getNextElement(_tmpl$32),
+                      _el$97 = _el$96.firstChild,
+                      _el$98 = _el$97.nextSibling,
+                      [_el$99, _co$20] = _$getNextMarker(_el$98.nextSibling);
+                    _$insert(_el$96, () => tag.label, _el$99, _co$20);
+                    return _el$96;
+                  })();
+                },
+                children: href => (() => {
+                  var _el$100 = _$getNextElement(_tmpl$33),
+                    _el$101 = _el$100.firstChild,
+                    _el$102 = _el$101.nextSibling,
+                    [_el$103, _co$21] = _$getNextMarker(_el$102.nextSibling);
+                  _$insert(_el$100, () => tag.label, _el$103, _co$21);
+                  _$effect(() => _$setAttribute(_el$100, "href", href()));
+                  return _el$100;
+                })()
+              }));
+              return _el$95;
+            })()
+          }));
+          return _el$93;
+        }
+      });
+    }
+  });
+}
+_$delegateEvents(["click"]);
+//# sourceMappingURL=DetailSections.js.map