@k2b/ui 0.45.0 → 0.47.0

package/dist/ssr/layout/DetailSections.js

@@ -0,0 +1,838 @@
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-detail-presence__face\"", ">", "<span class=\"k2b-detail-presence__dot\" aria-hidden=\"true\"></span></span>"],
+  _tmpl$2 = ["<span class=\"k2b-detail-presence__swatch\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$3 = ["<strong>", "</strong>"],
+  _tmpl$4 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-detail-presence__chip\" style=\"", "\"", "><span aria-hidden=\"true\" class=\"k2b-detail-presence__chip-content\">", "</span></button>"],
+  _tmpl$6 = ["<span class=\"k2b-detail-presence__chip\" style=\"", "\"", "><span class=\"k2b-sr-only\">", "</span><span aria-hidden=\"true\" class=\"k2b-detail-presence__chip-content\">", "</span></span>"],
+  _tmpl$7 = ["<div class=\"k2b-detail-presence__strip\"><div class=\"k2b-detail-presence__chips\">", "</div>", "</div>"],
+  _tmpl$8 = ["<p class=\"k2b-detail-presence__where k2b-truncate-fade\">", "</p>"],
+  _tmpl$9 = ["<div class=\"k2b-detail-presence\"", ">", "</div>"],
+  _tmpl$0 = ["<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>", "</div>"],
+  _tmpl$1 = "<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\"></span></div>",
+  _tmpl$10 = ["<p class=\"k2b-detail-presence__where\"><span class=\"k2b-detail-presence__skeleton-line\" aria-hidden=\"true\"></span><span class=\"k2b-sr-only\" role=\"status\">", "</span></p>"],
+  _tmpl$11 = "<i class=\"ti ti-refresh\" aria-hidden=\"true\"></i>",
+  _tmpl$12 = ["<span class=\"k2b-detail-presence__more\"", ">+", "</span>"],
+  _tmpl$13 = ["<span class=\"k2b-detail-presence__self\">", "", "</span>"],
+  _tmpl$14 = ["<span class=\"k2b-detail-presence-slot__more\">+", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-detail-presence-slot\" aria-hidden=\"true\">", "", "</span>"],
+  _tmpl$16 = ["<span class=\"k2b-sr-only\" role=\"status\">", "</span>"],
+  _tmpl$17 = ["<div class=\"k2b-detail-section-error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i><span>", "</span>", "</div>"],
+  _tmpl$18 = ["<p class=\"k2b-detail-section-note\">", "</p>"],
+  _tmpl$19 = ["<div class=\"k2b-detail-section-rows\"", ">", "", "", "", "", "</div>"],
+  _tmpl$20 = "<span class=\"k2b-detail-row-skeleton__face\"></span>",
+  _tmpl$21 = "<span class=\"k2b-detail-row-skeleton\"></span>",
+  _tmpl$22 = "<i class=\"ti ti-settings\" aria-hidden=\"true\"></i>",
+  _tmpl$23 = ["<div class=\"k2b-detail-section-group\"><div class=\"k2b-detail-section-label\">", "</div>", "", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-detail-section-rows\" aria-busy=\"true\">", "<span class=\"k2b-sr-only\" role=\"status\">", "</span></div>"],
+  _tmpl$25 = ["<div class=\"k2b-detail-section-rows\">", "", "", "", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-detail-section-rows\">", "", "</div>"],
+  _tmpl$27 = ["<dl class=\"k2b-detail-properties\">", "</dl>"],
+  _tmpl$28 = ["<span class=\"k2b-detail-properties__leading\">", "</span>"],
+  _tmpl$29 = ["<div class=\"k2b-detail-properties__item\"><dt>", "</dt><dd>", "", "</dd></div>"],
+  _tmpl$30 = ["<span class=\"k2b-detail-properties__value\">", "</span>"],
+  _tmpl$31 = ["<a class=\"k2b-detail-properties__value k2b-detail-properties__link\"", ">", "</a>"],
+  _tmpl$32 = ["<ul class=\"k2b-detail-tags\">", "</ul>"],
+  _tmpl$33 = ["<li>", "</li>"],
+  _tmpl$34 = ["<span class=\"k2b-detail-tag\">#", "</span>"],
+  _tmpl$35 = ["<a class=\"k2b-detail-tag\"", ">#", "</a>"];
+import { children, 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 => _$ssr(_tmpl$, _$ssrAttribute("data-live", props.live ? "true" : _$escape(undefined, true), false), _$escape(_$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: ""
+})));
+
+/**
+ * "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) => [index() > 0 ? ", " : "", _$ssr(_tmpl$2, _$ssrStyleProperty("--k2b-person-color:", _$escape(color(person), true))), _$ssr(_tmpl$3, _$escape(short(person))), _$createComponent(Show, {
+        get when() {
+          return person.place;
+        },
+        children: place => [" ", t().writesIn, " ", 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";
+      }
+    }), short(person), _$ssr(_tmpl$4, _$ssrAttribute("class", person.activity === "writing" ? "ti ti-pencil k2b-detail-presence__activity" : "ti ti-eye k2b-detail-presence__activity", false) + _$ssrAttribute("data-activity", _$escape(person.activity ?? "reading", true), false))];
+    return _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!person.onSelect)() && state() === "live";
+      },
+      get fallback() {
+        return _$ssr(_tmpl$6, _$ssrStyleProperty("--k2b-person-color:", _$escape(color(person), true)), _$ssrAttribute("title", _$escape(describe(person), true), false), _$escape(describe(person)), _$escape(content));
+      },
+      get children() {
+        return _$ssr(_tmpl$5, _$ssrStyleProperty("--k2b-person-color:", _$escape(color(person), true)), _$ssrAttribute("title", _$escape(describe(person), true), false) + _$ssrAttribute("aria-label", _$escape(t().jumpTo({
+          name: person.name,
+          place: person.place ?? ""
+        }), true), false), _$escape(content));
+      }
+    });
+  };
+  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() {
+      return _$ssr(_tmpl$9, _$ssrAttribute("data-state", _$escape(state(), true), false) + _$ssrAttribute("aria-busy", state() === "loading" ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return _$memo(() => state() !== "loading")() && state() !== "unavailable";
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return state() === "unavailable";
+            },
+            get fallback() {
+              return [_$ssr(_tmpl$1), _$ssr(_tmpl$10, _$escape(t().presenceLoading))];
+            },
+            get children() {
+              return [_$ssr(_tmpl$0, _$escape(t().presenceUnavailable), _$escape(_$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 [_$ssr(_tmpl$11), " ", t().retry];
+                  }
+                })
+              }))), _$ssr(_tmpl$8, _$escape(props.note))];
+            }
+          });
+        },
+        get children() {
+          return [_$ssr(_tmpl$7, _$escape(_$createComponent(For, {
+            get each() {
+              return others();
+            },
+            children: person => chip(person)
+          })), _$escape(_$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 [_$ssr(_tmpl$12, _$ssrAttribute("data-empty", hidden() === 0 ? "true" : _$escape(undefined, true), false), _$escape(hidden())), _$createComponent(Show, {
+                get when() {
+                  return self();
+                },
+                children: person => _$ssr(_tmpl$13, _$escape(_$createComponent(PresenceFace, {
+                  get person() {
+                    return person();
+                  },
+                  live: false
+                })), _$escape(t().you))
+              })];
+            }
+          }))), _$ssr(_tmpl$8, _$escape(where()))];
+        }
+      })));
+    }
+  });
+}
+
+/** 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 _$ssr(_tmpl$15, _$escape(_$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: ""
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.people.length > max();
+    },
+    get children() {
+      return _$ssr(_tmpl$14, _$escape(props.people.length) - _$escape(max()));
+    }
+  })));
+}
+
+// ── 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() {
+      return _$ssr(_tmpl$19, _$ssrAttribute("aria-busy", state() === "loading" ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return state() === "loading";
+        },
+        get children() {
+          return [_$createComponent(For, {
+            each: [0, 1, 2],
+            children: () => _$createComponent(DetailPanel.Row, {
+              get leading() {
+                return _$ssr(_tmpl$20);
+              },
+              get title() {
+                return _$ssr(_tmpl$21);
+              }
+            })
+          }), _$ssr(_tmpl$16, _$escape(t().accessLoading))];
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return state() === "error";
+        },
+        get children() {
+          return _$ssr(_tmpl$17, _$escape(t().accessFailed), _$escape(_$createComponent(Show, {
+            get when() {
+              return props.onRetry;
+            },
+            children: retry => _$createComponent(Button, {
+              variant: "text",
+              size: "xs",
+              onClick: () => retry()(),
+              get children() {
+                return t().retry;
+              }
+            })
+          })));
+        }
+      })), _$escape(_$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 _$ssr(_tmpl$4, _$ssrAttribute("class", all() ? "ti ti-chevron-up" : "ti ti-chevron-down", false));
+                },
+                get title() {
+                  return _$memo(() => !!all())() ? panel().showLess : panel().showMore({
+                    count: hiddenCount()
+                  });
+                },
+                onClick: () => setAll(!all())
+              });
+            }
+          })];
+        }
+      })), _$escape(_$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 _$ssr(_tmpl$22);
+              },
+              get title() {
+                return manage().label;
+              },
+              onClick: () => manage().onClick?.()
+            });
+          },
+          children: href => _$createComponent(DetailPanel.Action, {
+            get href() {
+              return href();
+            },
+            get leading() {
+              return _$ssr(_tmpl$22);
+            },
+            get title() {
+              return manage().label;
+            }
+          })
+        })
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.note;
+        },
+        get children() {
+          return _$ssr(_tmpl$18, _$escape(props.note));
+        }
+      })));
+    }
+  });
+}
+
+// ── Links ───────────────────────────────────────────────────────────────
+
+const LinkRow = props => {
+  const item = props.item;
+  const menu = item.menuItems ? {
+    menuItems: item.menuItems,
+    menuLabel: item.menuLabel
+  } : {};
+  const shared = {
+    leading: item.leading ?? _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(item.icon ?? "ti ti-file-text", true), false)),
+    title: item.title,
+    description: item.description,
+    trailing: item.trailing,
+    ...menu
+  };
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!!item.disabled)() && item.href;
+    },
+    get fallback() {
+      return _$createComponent(DetailPanel.Action, _$mergeProps({
+        type: "button",
+        get disabled() {
+          return item.disabled;
+        },
+        onClick: event => item.onClick?.(event)
+      }, shared));
+    },
+    children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
+      get href() {
+        return href();
+      },
+      get target() {
+        return item.target;
+      },
+      get rel() {
+        return item.rel;
+      },
+      onClick: event => item.onClick?.(event)
+    }, shared))
+  });
+};
+const LinkGroup = props => {
+  const panel = useDetailPanelMessages();
+  const [all, setAll] = createSignal(false);
+  const hiddenCount = () => Math.max(0, props.items.length - props.limit);
+  return _$ssr(_tmpl$23, _$escape(props.label), _$escape(_$createComponent(For, {
+    get each() {
+      return _$memo(() => !!all())() ? props.items : props.items.slice(0, props.limit);
+    },
+    children: item => _$createComponent(LinkRow, {
+      item: item
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return hiddenCount() > 0;
+    },
+    get children() {
+      return _$createComponent(DetailPanel.Action, {
+        type: "button",
+        get ["aria-expanded"]() {
+          return all();
+        },
+        get leading() {
+          return _$ssr(_tmpl$4, _$ssrAttribute("class", all() ? "ti ti-chevron-up" : "ti ti-chevron-down", false));
+        },
+        get title() {
+          return _$memo(() => !!all())() ? panel().showLess : panel().showMore({
+            count: hiddenCount()
+          });
+        },
+        onClick: () => setAll(!all())
+      });
+    }
+  })));
+};
+
+/**
+ * "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet", followed by the
+ * `footer` when there is one.
+ */
+export function DetailLinks(props) {
+  const t = useDetailSectionMessages();
+  const limit = () => Math.max(1, props.limit ?? 5);
+  const state = () => props.state ?? "ready";
+  const total = () => props.incoming.length + props.outgoing.length;
+  // Resolve once: the empty state reads it as a condition and as content.
+  const footer = children(() => props.footer);
+  const summary = () => {
+    if (state() === "loading") return t().linksLoading;
+    if (state() === "error") return t().linksFailed;
+    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));
+  };
+  // Loading and failure take the row the next links would take, so the loaded rows above never move.
+  const pending = () => [_$createComponent(Show, {
+    get when() {
+      return state() === "loading";
+    },
+    get children() {
+      return _$ssr(_tmpl$24, _$escape(_$createComponent(DetailPanel.Row, {
+        get leading() {
+          return _$ssr(_tmpl$20);
+        },
+        get title() {
+          return _$ssr(_tmpl$21);
+        }
+      })), _$escape(t().linksLoading));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return state() === "error";
+    },
+    get children() {
+      return _$ssr(_tmpl$17, _$escape(t().linksFailed), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.onRetry;
+        },
+        children: retry => _$createComponent(Button, {
+          variant: "text",
+          size: "xs",
+          onClick: () => retry()(),
+          get children() {
+            return t().retry;
+          }
+        })
+      })));
+    }
+  })];
+  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",
+        get count() {
+          return state() === "ready" ? 0 : undefined;
+        },
+        get ["class"]() {
+          return props.class;
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return state() !== "ready" || footer();
+            },
+            get children() {
+              return _$ssr(_tmpl$26, _$escape(pending()), _$escape(footer()));
+            }
+          });
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(DetailPanel.Section, {
+        get title() {
+          return props.title ?? t().links;
+        },
+        icon: "ti ti-arrows-exchange",
+        get count() {
+          return _$memo(() => state() === "ready")() ? total() : undefined;
+        },
+        collapsible: true,
+        get defaultOpen() {
+          return props.defaultOpen ?? true;
+        },
+        get summary() {
+          return summary();
+        },
+        get ["class"]() {
+          return props.class;
+        },
+        get children() {
+          return _$ssr(_tmpl$25, _$escape(_$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();
+                }
+              });
+            }
+          })), _$escape(_$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();
+                }
+              });
+            }
+          })), _$escape(pending()), _$escape(footer()));
+        }
+      });
+    }
+  });
+}
+
+// ── 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() {
+      return [_$ssr(_tmpl$27, _$escape(_$createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: item => _$ssr(_tmpl$29, _$escape(item.label), _$escape(_$createComponent(Show, {
+          get when() {
+            return item.leading;
+          },
+          get children() {
+            return _$ssr(_tmpl$28, _$escape(item.leading));
+          }
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return item.href;
+          },
+          get fallback() {
+            return _$ssr(_tmpl$30, _$escape(item.value));
+          },
+          children: href => _$ssr(_tmpl$31, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(item.value))
+        })))
+      }))), props.children];
+    }
+  });
+}
+
+// ── 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)() ? _$ssr(_tmpl$18, _$escape(props.emptyHint)) : undefined;
+        },
+        get children() {
+          return _$ssr(_tmpl$32, _$escape(_$createComponent(For, {
+            get each() {
+              return props.tags;
+            },
+            children: tag => _$ssr(_tmpl$33, _$escape(_$createComponent(Show, {
+              get when() {
+                return tag.href;
+              },
+              get fallback() {
+                return _$ssr(_tmpl$34, _$escape(tag.label));
+              },
+              children: href => _$ssr(_tmpl$35, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(tag.label))
+            })))
+          })));
+        }
+      });
+    }
+  });
+}
+//# sourceMappingURL=DetailSections.js.map