@k2b/ui 0.1.0-rc.0

package/dist/browser/layout/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["children","createMemo","createUniqueId","Show","Button","useUiMessages","read","value","SettingsPage","props","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$9","_el$0","_co$2","_$getNextMarker","nextSibling","_el$3","_el$4","_el$6","_el$7","_co$","_el$1","_el$10","_co$3","_el$11","_el$13","_el$14","_co$4","_$insert","_$createComponent","when","icon","_el$15","_tmpl$5","_$effect","_$className","title","subtitle","_el$5","_tmpl$","actions","_el$8","_tmpl$2","footer","_el$12","_tmpl$3","_p$","_v$","class","_v$2","style","_v$3","scrollPreserveKey","e","t","_$style","a","_$setAttribute","undefined","SettingsSection","headingId","_el$16","_tmpl$7","_el$17","_el$24","_el$25","_co$6","_el$18","_el$19","_el$21","_el$22","_co$5","_el$26","_el$27","_co$7","_el$28","_el$29","_el$20","_el$23","_tmpl$6","SETTINGS_GROUP_ACTION","Symbol","SettingsGroupAction","kind","collectSettingsGroupActions","Array","isArray","flatMap","collectSettingsGroupContent","SettingsGroup","resolved","action","content","_el$30","_tmpl$8","_el$31","_el$32","_el$33","_el$35","_el$36","_co$8","_el$37","_el$38","_co$9","_el$39","description","_el$34","slot","_el$40","_tmpl$9","Action","sameSettingValue","left","right","JSON","stringify","readSettingsError","response","fallback","data","json","catch","message","fields","errors","SettingsField","messages","id","descriptionId","errorId","describedBy","error","control","_el$41","_tmpl$1","_el$42","_el$43","_el$44","_el$46","_el$47","_co$0","_el$48","_el$49","_el$50","_co$1","_el$51","_el$52","_co$10","label","_$memo","changed","_el$45","_tmpl$0","unsaved","_el$53","_tmpl$10","_el$54","_el$55","_el$56","_el$57","_co$11","SettingsActions","changeCount","loading","disabled","Boolean","disableWithoutChanges","saveDisabled","_el$58","_tmpl$12","_el$60","_el$61","_co$12","_el$62","_el$63","_co$13","variant","onClick","onDiscard","discard","saveVariant","loadingLabel","saving","onSave","_tmpl$11","saveLabel","saveChanges","SettingsSaveBar","_el$64","_tmpl$13","_el$65","_el$66","_el$67","_el$68","_el$69","_co$14","_el$70","_el$71","_co$15","unsavedChangeLabel","count","SettingsPanelFooter","_el$72","_tmpl$15","noUnsavedChanges","_el$73","_tmpl$14","_$mergeProps"],"sources":["layout/Settings.tsx"],"sourcesContent":["import { children, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button, type ButtonVariant } from \"../actions/Button\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { useUiMessages } from \"../intl/messages\";\n\nconst read = <T,>(value: MaybeAccessor<T>): T => (typeof value === \"function\" ? (value as () => T)() : value);\n\nexport type SettingsPageProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  footer?: JSX.Element;\n  scrollPreserveKey?: string;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nexport function SettingsPage(props: SettingsPageProps): JSX.Element {\n  return (\n    <section class={`k2b-settings-page${props.class ? ` ${props.class}` : \"\"}`} style={props.style}>\n      <header class=\"k2b-settings-page__header\">\n        <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <div class=\"k2b-settings-page__heading\">\n          <h1>{props.title}</h1>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-settings-page__actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-settings-page__body\" data-scroll-preserve={props.scrollPreserveKey}>\n        {props.children}\n      </div>\n      <Show when={props.footer}>\n        <footer class=\"k2b-settings-page__footer\">{props.footer}</footer>\n      </Show>\n    </section>\n  );\n}\n\nexport type SettingsSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\n/**\n * A full-page settings group. Dialogs keep using PanelDialog.Section; this\n * component owns the quieter, observability-style paper used on admin pages.\n */\nexport function SettingsSection(props: SettingsSectionProps): JSX.Element {\n  const headingId = `k2b-settings-section-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-section${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-section__header\">\n        <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <div class=\"k2b-settings-section__heading\">\n          <h2 id={headingId}>{props.title}</h2>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-settings-section__actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-settings-section__body\">{props.children}</div>\n    </section>\n  );\n}\n\nconst SETTINGS_GROUP_ACTION = Symbol(\"SettingsGroup.Action\");\n\nexport type SettingsGroupProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\nexport type SettingsGroupActionProps = {\n  children: JSX.Element;\n};\n\ntype SettingsGroupActionDefinition = {\n  readonly kind: typeof SETTINGS_GROUP_ACTION;\n  readonly props: SettingsGroupActionProps;\n};\n\ntype SettingsGroupComponent = ((props: SettingsGroupProps) => JSX.Element) & {\n  Action: (props: SettingsGroupActionProps) => JSX.Element;\n};\n\nconst SettingsGroupAction = (props: SettingsGroupActionProps): JSX.Element =>\n  ({ kind: SETTINGS_GROUP_ACTION, props }) satisfies SettingsGroupActionDefinition as unknown as JSX.Element;\n\nconst collectSettingsGroupActions = (value: unknown): SettingsGroupActionDefinition[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupActions);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION\n    ? [value as SettingsGroupActionDefinition]\n    : [];\n};\n\nconst collectSettingsGroupContent = (value: unknown): JSX.Element[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupContent);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION ? [] : [value as JSX.Element];\n};\n\nexport const SettingsGroup = ((props: SettingsGroupProps): JSX.Element => {\n  const resolved = children(() => props.children);\n  const action = createMemo(() => collectSettingsGroupActions(resolved())[0]);\n  const content = createMemo(() => collectSettingsGroupContent(resolved()));\n  const headingId = `k2b-settings-group-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-group${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-group__header\">\n        <div class=\"k2b-settings-group__heading\">\n          <h3 id={headingId}>{props.title}</h3>\n          <Show when={props.description}>\n            <p>{props.description}</p>\n          </Show>\n        </div>\n        <Show when={action()}>{(slot) => <div class=\"k2b-settings-group__action\">{slot().props.children}</div>}</Show>\n      </header>\n      <div class=\"k2b-settings-group__body\">{content()}</div>\n    </section>\n  );\n}) as SettingsGroupComponent;\n\nSettingsGroup.Action = SettingsGroupAction;\n\nexport const sameSettingValue = (left: unknown, right: unknown): boolean => JSON.stringify(left) === JSON.stringify(right);\n\nexport const readSettingsError = async (\n  response: Response,\n  fallback: string,\n): Promise<{ message: string; fields: Record<string, string> }> => {\n  const data = (await response.json().catch(() => null)) as {\n    message?: string;\n    errors?: Record<string, string>;\n  } | null;\n  return { message: data?.message ?? fallback, fields: data?.errors ?? {} };\n};\n\nexport type SettingsFieldProps = {\n  label: string;\n  description: string;\n  error: MaybeAccessor<string | undefined>;\n  changed?: MaybeAccessor<boolean>;\n  children: JSX.Element | ((control: SettingsFieldControlProps) => JSX.Element);\n  class?: string;\n};\n\nexport type SettingsFieldControlProps = {\n  describedBy: () => string;\n};\n\nexport function SettingsField(props: SettingsFieldProps): JSX.Element {\n  const messages = useUiMessages();\n  const id = createUniqueId();\n  const descriptionId = `k2b-settings-field-${id}-description`;\n  const errorId = `k2b-settings-field-${id}-error`;\n  const describedBy = () => (read(props.error) ? `${descriptionId} ${errorId}` : descriptionId);\n  const control = () =>\n    typeof props.children === \"function\"\n      ? (props.children as (control: SettingsFieldControlProps) => JSX.Element)({ describedBy })\n      : props.children;\n  return (\n    <div class={`k2b-settings-field ${props.class ?? \"\"}`}>\n      <div class=\"k2b-settings-field__copy\">\n        <div class=\"k2b-settings-field__heading\">\n          <strong>{props.label}</strong>\n          <Show when={props.changed !== undefined && read(props.changed)}>\n            <span>{messages().unsaved}</span>\n          </Show>\n        </div>\n        <p id={descriptionId}>{props.description}</p>\n      </div>\n      {control()}\n      <Show when={read(props.error)}>\n        {(error) => (\n          <p id={errorId} class=\"k2b-settings-field__error\" role=\"alert\">\n            <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" /> {error()}\n          </p>\n        )}\n      </Show>\n    </div>\n  );\n}\n\nexport type SettingsSaveBarProps = {\n  changeCount: MaybeAccessor<number>;\n  loading: MaybeAccessor<boolean>;\n  saveDisabled?: MaybeAccessor<boolean>;\n  onDiscard: () => void;\n  onSave: () => void;\n  saveLabel?: string;\n  saveVariant?: ButtonVariant;\n  class?: string;\n};\n\nconst SettingsActions = (\n  props: SettingsSaveBarProps & {\n    disableWithoutChanges?: boolean;\n  },\n): JSX.Element => {\n  const messages = useUiMessages();\n  const changeCount = () => read(props.changeCount);\n  const loading = () => read(props.loading);\n  const disabled = () => loading() || Boolean(props.disableWithoutChanges && changeCount() === 0);\n  const saveDisabled = () => disabled() || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled));\n  return (\n    <div class=\"k2b-settings-actions\">\n      <Button variant=\"secondary\" disabled={disabled()} onClick={props.onDiscard}>\n        {messages().discard}\n      </Button>\n      <Button\n        variant={props.saveVariant ?? \"primary\"}\n        loading={loading()}\n        loadingLabel={messages().saving}\n        disabled={saveDisabled()}\n        onClick={props.onSave}\n      >\n        <i class=\"ti ti-device-floppy\" aria-hidden=\"true\" />\n        {props.saveLabel ?? messages().saveChanges}\n      </Button>\n    </div>\n  );\n};\n\nexport function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element {\n  const messages = useUiMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <Show when={changeCount() > 0}>\n      <div class={`k2b-settings-save-bar ${props.class ?? \"\"}`}>\n        <p role=\"status\" aria-live=\"polite\">\n          <strong>{changeCount()}</strong> {messages().unsavedChangeLabel({ count: changeCount() })}\n        </p>\n        <SettingsActions {...props} />\n      </div>\n    </Show>\n  );\n}\n\nexport type SettingsPanelFooterProps = SettingsSaveBarProps;\n\nexport function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element {\n  const messages = useUiMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <>\n      <p class=\"k2b-settings-panel-footer__status\" role=\"status\" aria-live=\"polite\">\n        <Show when={changeCount() > 0} fallback={messages().noUnsavedChanges}>\n          <strong>{changeCount()}</strong> {messages().unsavedChangeLabel({ count: changeCount() })}\n        </Show>\n      </p>\n      <SettingsActions {...props} disableWithoutChanges />\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/SettingsCollection.js

@@ -0,0 +1,212 @@
+import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-arrow-up"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i class="ti ti-arrow-down"aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<ul class=k2b-settings-collection__list>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<section><header class=k2b-settings-collection__header><div class=k2b-settings-collection__heading><h3></h3><!$><!/></div><!$><!/></header><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-settings-collection__action>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-settings-collection__item-icon>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<li class=k2b-settings-collection__item><!$><!/><div class=k2b-settings-collection__item-copy><h4></h4><!$><!/></div><!$><!/><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-settings-collection__item-status>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-settings-collection__item-actions>`);
+import { children, createMemo, createUniqueId, For, Show } from "solid-js";
+import { IconButton } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
+import Placeholder from "../surfaces/Placeholder";
+const SETTINGS_COLLECTION_ACTION = Symbol("SettingsCollection.Action");
+const SETTINGS_COLLECTION_ITEM = Symbol("SettingsCollection.Item");
+const SETTINGS_COLLECTION_ITEM_STATUS = Symbol("SettingsCollection.Item.Status");
+const SETTINGS_COLLECTION_ITEM_ACTIONS = Symbol("SettingsCollection.Item.Actions");
+const definition = (kind, props) => ({
+  kind,
+  props
+});
+const isDefinition = (value, kind) => Boolean(value && typeof value === "object" && value.kind === kind);
+const collect = (value, match) => {
+  if (Array.isArray(value)) return value.flatMap(entry => collect(entry, match));
+  return match(value) ? [value] : [];
+};
+const SettingsCollectionAction = props => definition(SETTINGS_COLLECTION_ACTION, props);
+const SettingsCollectionItemStatus = props => definition(SETTINGS_COLLECTION_ITEM_STATUS, props);
+const SettingsCollectionItemActions = props => definition(SETTINGS_COLLECTION_ITEM_ACTIONS, props);
+const SettingsCollectionItemReorder = props => {
+  const messages = useUiMessages();
+  return [_$createComponent(IconButton, {
+    get label() {
+      return messages().moveNamedUp({
+        label: props.label
+      });
+    },
+    size: "sm",
+    get title() {
+      return messages().moveUp;
+    },
+    get disabled() {
+      return props.disabled || props.index <= 0;
+    },
+    onClick: () => props.onMove(-1),
+    get children() {
+      return _$getNextElement(_tmpl$);
+    }
+  }), _$createComponent(IconButton, {
+    get label() {
+      return messages().moveNamedDown({
+        label: props.label
+      });
+    },
+    size: "sm",
+    get title() {
+      return messages().moveDown;
+    },
+    get disabled() {
+      return props.disabled || props.index >= props.count - 1;
+    },
+    onClick: () => props.onMove(1),
+    get children() {
+      return _$getNextElement(_tmpl$2);
+    }
+  })];
+};
+const SettingsCollectionItem = props => definition(SETTINGS_COLLECTION_ITEM, props);
+SettingsCollectionItem.Status = SettingsCollectionItemStatus;
+SettingsCollectionItem.Actions = SettingsCollectionItemActions;
+SettingsCollectionItem.Reorder = SettingsCollectionItemReorder;
+const SettingsCollection = props => {
+  const messages = useUiMessages();
+  const resolved = children(() => props.children);
+  const items = createMemo(() => collect(resolved(), entry => isDefinition(entry, SETTINGS_COLLECTION_ITEM)));
+  const action = createMemo(() => collect(resolved(), entry => isDefinition(entry, SETTINGS_COLLECTION_ACTION))[0]);
+  const headingId = `k2b-settings-collection-${createUniqueId()}`;
+  return (() => {
+    var _el$3 = _$getNextElement(_tmpl$5),
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$5.firstChild,
+      _el$8 = _el$6.nextSibling,
+      [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+      _el$0 = _el$5.nextSibling,
+      [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
+      _el$11 = _el$4.nextSibling,
+      [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
+    _$setAttribute(_el$3, "aria-labelledby", headingId);
+    _$setAttribute(_el$6, "id", headingId);
+    _$insert(_el$6, () => props.title);
+    _$insert(_el$5, _$createComponent(Show, {
+      get when() {
+        return props.description;
+      },
+      get children() {
+        var _el$7 = _$getNextElement(_tmpl$3);
+        _$insert(_el$7, () => props.description);
+        return _el$7;
+      }
+    }), _el$9, _co$);
+    _$insert(_el$4, _$createComponent(Show, {
+      get when() {
+        return action();
+      },
+      children: slot => (() => {
+        var _el$13 = _$getNextElement(_tmpl$6);
+        _$insert(_el$13, () => slot().props.children);
+        return _el$13;
+      })()
+    }), _el$1, _co$2);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return items().length > 0;
+      },
+      get fallback() {
+        return _$createComponent(Placeholder, {
+          variant: "compact",
+          align: "left",
+          get description() {
+            return props.empty ?? messages().nothingHere;
+          }
+        });
+      },
+      get children() {
+        var _el$10 = _$getNextElement(_tmpl$4);
+        _$insert(_el$10, _$createComponent(For, {
+          get each() {
+            return items();
+          },
+          children: item => {
+            const resolvedItem = children(() => item.props.children);
+            const status = () => collect(resolvedItem(), entry => isDefinition(entry, SETTINGS_COLLECTION_ITEM_STATUS))[0];
+            const actions = () => collect(resolvedItem(), entry => isDefinition(entry, SETTINGS_COLLECTION_ITEM_ACTIONS))[0];
+            return (() => {
+              var _el$14 = _$getNextElement(_tmpl$8),
+                _el$21 = _el$14.firstChild,
+                [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
+                _el$16 = _el$22.nextSibling,
+                _el$17 = _el$16.firstChild,
+                _el$19 = _el$17.nextSibling,
+                [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling),
+                _el$23 = _el$16.nextSibling,
+                [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+                _el$25 = _el$24.nextSibling,
+                [_el$26, _co$7] = _$getNextMarker(_el$25.nextSibling);
+              _$insert(_el$14, _$createComponent(Show, {
+                get when() {
+                  return item.props.icon;
+                },
+                get children() {
+                  var _el$15 = _$getNextElement(_tmpl$7);
+                  _$insert(_el$15, () => item.props.icon);
+                  return _el$15;
+                }
+              }), _el$22, _co$5);
+              _$insert(_el$17, () => item.props.title);
+              _$insert(_el$16, _$createComponent(Show, {
+                get when() {
+                  return item.props.description;
+                },
+                get children() {
+                  var _el$18 = _$getNextElement(_tmpl$3);
+                  _$insert(_el$18, () => item.props.description);
+                  return _el$18;
+                }
+              }), _el$20, _co$4);
+              _$insert(_el$14, _$createComponent(Show, {
+                get when() {
+                  return status();
+                },
+                children: slot => (() => {
+                  var _el$27 = _$getNextElement(_tmpl$9);
+                  _$insert(_el$27, () => slot().props.children);
+                  return _el$27;
+                })()
+              }), _el$24, _co$6);
+              _$insert(_el$14, _$createComponent(Show, {
+                get when() {
+                  return actions();
+                },
+                children: slot => (() => {
+                  var _el$28 = _$getNextElement(_tmpl$0);
+                  _$insert(_el$28, () => slot().props.children);
+                  return _el$28;
+                })()
+              }), _el$26, _co$7);
+              return _el$14;
+            })();
+          }
+        }));
+        return _el$10;
+      }
+    }), _el$12, _co$3);
+    _$effect(() => _$className(_el$3, `k2b-settings-collection${props.class ? ` ${props.class}` : ""}`));
+    return _el$3;
+  })();
+};
+SettingsCollection.Action = SettingsCollectionAction;
+SettingsCollection.Item = SettingsCollectionItem;
+export default SettingsCollection;
+//# sourceMappingURL=SettingsCollection.js.map

package/dist/browser/layout/SettingsCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["children","createMemo","createUniqueId","For","Show","IconButton","useUiMessages","Placeholder","SETTINGS_COLLECTION_ACTION","Symbol","SETTINGS_COLLECTION_ITEM","SETTINGS_COLLECTION_ITEM_STATUS","SETTINGS_COLLECTION_ITEM_ACTIONS","definition","kind","props","isDefinition","value","Boolean","collect","match","Array","isArray","flatMap","entry","SettingsCollectionAction","SettingsCollectionItemStatus","SettingsCollectionItemActions","SettingsCollectionItemReorder","messages","_$createComponent","label","moveNamedUp","size","title","moveUp","disabled","index","onClick","onMove","_$getNextElement","_tmpl$","moveNamedDown","moveDown","count","_tmpl$2","SettingsCollectionItem","Status","Actions","Reorder","SettingsCollection","resolved","items","action","headingId","_el$3","_tmpl$5","_el$4","firstChild","_el$5","_el$6","_el$8","nextSibling","_el$9","_co$","_$getNextMarker","_el$0","_el$1","_co$2","_el$11","_el$12","_co$3","_$setAttribute","_$insert","when","description","_el$7","_tmpl$3","slot","_el$13","_tmpl$6","length","fallback","variant","align","empty","nothingHere","_el$10","_tmpl$4","each","item","resolvedItem","status","actions","_el$14","_tmpl$8","_el$21","_el$22","_co$5","_el$16","_el$17","_el$19","_el$20","_co$4","_el$23","_el$24","_co$6","_el$25","_el$26","_co$7","icon","_el$15","_tmpl$7","_el$18","_el$27","_tmpl$9","_el$28","_tmpl$0","_$effect","_$className","class","Action","Item"],"sources":["layout/SettingsCollection.tsx"],"sourcesContent":["import { children, createMemo, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport Placeholder from \"../surfaces/Placeholder\";\n\nconst SETTINGS_COLLECTION_ACTION = Symbol(\"SettingsCollection.Action\");\nconst SETTINGS_COLLECTION_ITEM = Symbol(\"SettingsCollection.Item\");\nconst SETTINGS_COLLECTION_ITEM_STATUS = Symbol(\"SettingsCollection.Item.Status\");\nconst SETTINGS_COLLECTION_ITEM_ACTIONS = Symbol(\"SettingsCollection.Item.Actions\");\n\ntype SlotDefinition<T extends symbol, P> = {\n  readonly kind: T;\n  readonly props: P;\n};\n\nexport type SettingsCollectionProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  empty?: JSX.Element;\n  children?: JSX.Element;\n  class?: string;\n};\n\nexport type SettingsCollectionActionProps = {\n  children: JSX.Element;\n};\n\nexport type SettingsCollectionItemProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  icon?: JSX.Element;\n  children?: JSX.Element;\n};\n\nexport type SettingsCollectionItemStatusProps = {\n  children: JSX.Element;\n};\n\nexport type SettingsCollectionItemActionsProps = {\n  children: JSX.Element;\n};\n\nexport type SettingsCollectionItemReorderProps = {\n  label: string;\n  index: number;\n  count: number;\n  disabled?: boolean;\n  onMove: (direction: -1 | 1) => void;\n};\n\ntype SettingsCollectionActionDefinition = SlotDefinition<typeof SETTINGS_COLLECTION_ACTION, SettingsCollectionActionProps>;\ntype SettingsCollectionItemDefinition = SlotDefinition<typeof SETTINGS_COLLECTION_ITEM, SettingsCollectionItemProps>;\ntype SettingsCollectionItemStatusDefinition = SlotDefinition<typeof SETTINGS_COLLECTION_ITEM_STATUS, SettingsCollectionItemStatusProps>;\ntype SettingsCollectionItemActionsDefinition = SlotDefinition<typeof SETTINGS_COLLECTION_ITEM_ACTIONS, SettingsCollectionItemActionsProps>;\n\ntype SettingsCollectionItemComponent = ((props: SettingsCollectionItemProps) => JSX.Element) & {\n  Status: (props: SettingsCollectionItemStatusProps) => JSX.Element;\n  Actions: (props: SettingsCollectionItemActionsProps) => JSX.Element;\n  Reorder: (props: SettingsCollectionItemReorderProps) => JSX.Element;\n};\n\ntype SettingsCollectionComponent = ((props: SettingsCollectionProps) => JSX.Element) & {\n  Action: (props: SettingsCollectionActionProps) => JSX.Element;\n  Item: SettingsCollectionItemComponent;\n};\n\nconst definition = <T extends symbol, P>(kind: T, props: P): JSX.Element =>\n  ({ kind, props }) satisfies SlotDefinition<T, P> as unknown as JSX.Element;\n\nconst isDefinition = <T extends symbol, P>(value: unknown, kind: T): value is SlotDefinition<T, P> =>\n  Boolean(value && typeof value === \"object\" && (value as { kind?: unknown }).kind === kind);\n\nconst collect = <T,>(value: unknown, match: (entry: unknown) => entry is T): T[] => {\n  if (Array.isArray(value)) return value.flatMap((entry) => collect(entry, match));\n  return match(value) ? [value] : [];\n};\n\nconst SettingsCollectionAction = (props: SettingsCollectionActionProps): JSX.Element => definition(SETTINGS_COLLECTION_ACTION, props);\n\nconst SettingsCollectionItemStatus = (props: SettingsCollectionItemStatusProps): JSX.Element =>\n  definition(SETTINGS_COLLECTION_ITEM_STATUS, props);\n\nconst SettingsCollectionItemActions = (props: SettingsCollectionItemActionsProps): JSX.Element =>\n  definition(SETTINGS_COLLECTION_ITEM_ACTIONS, props);\n\nconst SettingsCollectionItemReorder = (props: SettingsCollectionItemReorderProps): JSX.Element => {\n  const messages = useUiMessages();\n  return (\n    <>\n      <IconButton\n        label={messages().moveNamedUp({ label: props.label })}\n        size=\"sm\"\n        title={messages().moveUp}\n        disabled={props.disabled || props.index <= 0}\n        onClick={() => props.onMove(-1)}\n      >\n        <i class=\"ti ti-arrow-up\" aria-hidden=\"true\" />\n      </IconButton>\n      <IconButton\n        label={messages().moveNamedDown({ label: props.label })}\n        size=\"sm\"\n        title={messages().moveDown}\n        disabled={props.disabled || props.index >= props.count - 1}\n        onClick={() => props.onMove(1)}\n      >\n        <i class=\"ti ti-arrow-down\" aria-hidden=\"true\" />\n      </IconButton>\n    </>\n  );\n};\n\nconst SettingsCollectionItem = ((props: SettingsCollectionItemProps): JSX.Element =>\n  definition(SETTINGS_COLLECTION_ITEM, props)) as SettingsCollectionItemComponent;\n\nSettingsCollectionItem.Status = SettingsCollectionItemStatus;\nSettingsCollectionItem.Actions = SettingsCollectionItemActions;\nSettingsCollectionItem.Reorder = SettingsCollectionItemReorder;\n\nconst SettingsCollection = ((props: SettingsCollectionProps): JSX.Element => {\n  const messages = useUiMessages();\n  const resolved = children(() => props.children);\n  const items = createMemo(() =>\n    collect<SettingsCollectionItemDefinition>(resolved(), (entry): entry is SettingsCollectionItemDefinition =>\n      isDefinition(entry, SETTINGS_COLLECTION_ITEM),\n    ),\n  );\n  const action = createMemo(\n    () =>\n      collect<SettingsCollectionActionDefinition>(resolved(), (entry): entry is SettingsCollectionActionDefinition =>\n        isDefinition(entry, SETTINGS_COLLECTION_ACTION),\n      )[0],\n  );\n  const headingId = `k2b-settings-collection-${createUniqueId()}`;\n\n  return (\n    <section class={`k2b-settings-collection${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-collection__header\">\n        <div class=\"k2b-settings-collection__heading\">\n          <h3 id={headingId}>{props.title}</h3>\n          <Show when={props.description}>\n            <p>{props.description}</p>\n          </Show>\n        </div>\n        <Show when={action()}>{(slot) => <div class=\"k2b-settings-collection__action\">{slot().props.children}</div>}</Show>\n      </header>\n      <Show\n        when={items().length > 0}\n        fallback={<Placeholder variant=\"compact\" align=\"left\" description={props.empty ?? messages().nothingHere} />}\n      >\n        <ul class=\"k2b-settings-collection__list\">\n          <For each={items()}>\n            {(item) => {\n              const resolvedItem = children(() => item.props.children);\n              const status = () =>\n                collect<SettingsCollectionItemStatusDefinition>(resolvedItem(), (entry): entry is SettingsCollectionItemStatusDefinition =>\n                  isDefinition(entry, SETTINGS_COLLECTION_ITEM_STATUS),\n                )[0];\n              const actions = () =>\n                collect<SettingsCollectionItemActionsDefinition>(\n                  resolvedItem(),\n                  (entry): entry is SettingsCollectionItemActionsDefinition => isDefinition(entry, SETTINGS_COLLECTION_ITEM_ACTIONS),\n                )[0];\n              return (\n                <li class=\"k2b-settings-collection__item\">\n                  <Show when={item.props.icon}>\n                    <span class=\"k2b-settings-collection__item-icon\">{item.props.icon}</span>\n                  </Show>\n                  <div class=\"k2b-settings-collection__item-copy\">\n                    <h4>{item.props.title}</h4>\n                    <Show when={item.props.description}>\n                      <p>{item.props.description}</p>\n                    </Show>\n                  </div>\n                  <Show when={status()}>{(slot) => <div class=\"k2b-settings-collection__item-status\">{slot().props.children}</div>}</Show>\n                  <Show when={actions()}>{(slot) => <div class=\"k2b-settings-collection__item-actions\">{slot().props.children}</div>}</Show>\n                </li>\n              );\n            }}\n          </For>\n        </ul>\n      </Show>\n    </section>\n  );\n}) as SettingsCollectionComponent;\n\nSettingsCollection.Action = SettingsCollectionAction;\nSettingsCollection.Item = SettingsCollectionItem;\n\nexport default SettingsCollection;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/SettingsModal.js

@@ -0,0 +1,281 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { className as _$className } 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 { runHydrationEvents as _$runHydrationEvents } 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";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button role=tab><!$><!/><span>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<button type=button class="k2b-settings__close k2b-icon-button"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div role=region><!$><!/><aside class=k2b-settings__rail><nav class=k2b-settings__tabs role=tablist></nav></aside><div class=k2b-settings__content><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-settings__tab-group role=presentation><span class=k2b-settings__tab-group-label aria-hidden=true></span><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<section class=k2b-settings__body role=tabpanel tabindex=0><div class=k2b-settings__section><div class=k2b-settings__section-heading><h2></h2><!$><!/></div><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<p>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<footer class=k2b-settings__footer>`);
+import { children, createMemo, createSignal, createUniqueId, For, Show } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import { assertUniqueStableUiIds } from "./stable-id";
+const SETTINGS_MODAL_TAB = Symbol("SettingsModal.Tab");
+const SETTINGS_MODAL_GROUP = Symbol("SettingsModal.Group");
+const SETTINGS_MODAL_FOOTER = Symbol("SettingsModal.Footer");
+const isTabDefinition = value => !!value && typeof value === "object" && value.kind === SETTINGS_MODAL_TAB;
+const isGroupDefinition = value => !!value && typeof value === "object" && value.kind === SETTINGS_MODAL_GROUP;
+const isFooterDefinition = value => !!value && typeof value === "object" && value.kind === SETTINGS_MODAL_FOOTER;
+const collectTabs = value => {
+  if (Array.isArray(value)) return value.flatMap(collectTabs);
+  if (isGroupDefinition(value)) return collectTabs(value.props.children);
+  return isTabDefinition(value) ? [value] : [];
+};
+const collectRailEntries = value => {
+  if (Array.isArray(value)) return value.flatMap(collectRailEntries);
+  if (isGroupDefinition(value) || isTabDefinition(value)) return [value];
+  return [];
+};
+const splitPanelChildren = value => {
+  if (Array.isArray(value)) {
+    return value.reduce((result, entry) => {
+      const next = splitPanelChildren(entry);
+      result.content.push(...next.content);
+      if (next.footer) result.footer = next.footer;
+      return result;
+    }, {
+      content: []
+    });
+  }
+  return isFooterDefinition(value) ? {
+    content: [],
+    footer: value
+  } : {
+    content: [value]
+  };
+};
+function SettingsModalTab(props) {
+  return {
+    kind: SETTINGS_MODAL_TAB,
+    props
+  };
+}
+function SettingsModalGroup(props) {
+  return {
+    kind: SETTINGS_MODAL_GROUP,
+    props
+  };
+}
+function SettingsModalFooter(props) {
+  return {
+    kind: SETTINGS_MODAL_FOOTER,
+    props
+  };
+}
+const SettingsModal = props => {
+  const messages = useUiMessages();
+  const resolved = children(() => props.children);
+  const railEntries = createMemo(() => collectRailEntries(resolved()));
+  const tabs = createMemo(() => {
+    const collected = collectTabs(resolved());
+    assertUniqueStableUiIds(collected.map(tab => tab.props.id), "SettingsModal.Tab id");
+    return collected;
+  });
+  const instanceId = `k2b-settings-${createUniqueId()}`;
+  const tabRefs = new Map();
+  const firstTabId = () => tabs()[0]?.props.id ?? "";
+  const [localActiveTab, setLocalActiveTab] = createSignal(props.defaultTab ?? firstTabId());
+  const requestedActiveTabId = () => props.activeTab ?? (localActiveTab() || firstTabId());
+  const resolvedActiveTabId = () => tabs().some(tab => tab.props.id === requestedActiveTabId()) ? requestedActiveTabId() : firstTabId();
+  const activeTab = () => tabs().find(tab => tab.props.id === resolvedActiveTabId()) ?? null;
+  const resolvedPanelChildren = children(() => activeTab()?.props.children);
+  const panelChildren = createMemo(() => splitPanelChildren(resolvedPanelChildren()));
+  const selectTab = id => {
+    if (props.activeTab === undefined) setLocalActiveTab(id);
+    props.onTabChange?.(id);
+  };
+  const moveTabFocus = (event, currentId) => {
+    const currentIndex = tabs().findIndex(tab => tab.props.id === currentId);
+    if (currentIndex < 0 || tabs().length === 0) return;
+    let nextIndex = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % tabs().length;
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + tabs().length) % tabs().length;
+    if (event.key === "Home") nextIndex = 0;
+    if (event.key === "End") nextIndex = tabs().length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    const nextTab = tabs()[nextIndex];
+    if (!nextTab) return;
+    selectTab(nextTab.props.id);
+    tabRefs.get(nextTab.props.id)?.focus();
+  };
+  const tabId = id => `${instanceId}-tab-${id}`;
+  const panelId = id => `${instanceId}-panel-${id}`;
+  const TabButton = tab => {
+    const active = () => resolvedActiveTabId() === tab.props.id;
+    return (() => {
+      var _el$ = _$getNextElement(_tmpl$),
+        _el$3 = _el$.firstChild,
+        [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+        _el$2 = _el$4.nextSibling;
+      _el$.$$keydown = event => moveTabFocus(event, tab.props.id);
+      _el$.$$click = () => selectTab(tab.props.id);
+      _$use(element => tabRefs.set(tab.props.id, element), _el$);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return tab.props.icon;
+        },
+        children: icon => (() => {
+          var _el$5 = _$getNextElement(_tmpl$2);
+          _$effect(() => _$className(_el$5, icon()));
+          return _el$5;
+        })()
+      }), _el$4, _co$);
+      _$insert(_el$2, () => tab.props.title);
+      _$effect(_p$ => {
+        var _v$ = tabId(tab.props.id),
+          _v$2 = active(),
+          _v$3 = active() ? panelId(tab.props.id) : undefined,
+          _v$4 = active() ? 0 : -1,
+          _v$5 = active() ? "active" : "idle",
+          _v$6 = active() ? "true" : undefined,
+          _v$7 = tab.props.tone ?? "default";
+        _v$ !== _p$.e && _$setAttribute(_el$, "id", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "aria-selected", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$, "aria-controls", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$, "tabindex", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$, "data-state", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setAttribute(_el$, "data-active", _p$.n = _v$6);
+        _v$7 !== _p$.s && _$setAttribute(_el$, "data-tone", _p$.s = _v$7);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    })();
+  };
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$4),
+      _el$13 = _el$6.firstChild,
+      [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling),
+      _el$8 = _el$14.nextSibling,
+      _el$9 = _el$8.firstChild,
+      _el$0 = _el$8.nextSibling,
+      _el$1 = _el$0.firstChild,
+      [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling),
+      _el$11 = _el$10.nextSibling,
+      [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return props.onClose;
+      },
+      get children() {
+        var _el$7 = _$getNextElement(_tmpl$3);
+        _$addEventListener(_el$7, "click", props.onClose, true);
+        _$effect(() => _$setAttribute(_el$7, "aria-label", props.closeLabel ?? messages().close));
+        _$runHydrationEvents();
+        return _el$7;
+      }
+    }), _el$14, _co$4);
+    _$insert(_el$9, _$createComponent(For, {
+      get each() {
+        return railEntries();
+      },
+      children: entry => isGroupDefinition(entry) ? (() => {
+        var _el$15 = _$getNextElement(_tmpl$5),
+          _el$16 = _el$15.firstChild,
+          _el$17 = _el$16.nextSibling,
+          [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling);
+        _$insert(_el$16, () => entry.props.title);
+        _$insert(_el$15, _$createComponent(For, {
+          get each() {
+            return collectTabs(entry.props.children);
+          },
+          children: tab => TabButton(tab)
+        }), _el$18, _co$5);
+        return _el$15;
+      })() : TabButton(entry)
+    }));
+    _$insert(_el$0, _$createComponent(Show, {
+      get when() {
+        return activeTab();
+      },
+      children: tab => (() => {
+        var _el$19 = _$getNextElement(_tmpl$6),
+          _el$20 = _el$19.firstChild,
+          _el$21 = _el$20.firstChild,
+          _el$22 = _el$21.firstChild,
+          _el$23 = _el$22.nextSibling,
+          [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
+          _el$25 = _el$21.nextSibling,
+          [_el$26, _co$7] = _$getNextMarker(_el$25.nextSibling);
+        _$insert(_el$22, () => tab().props.title);
+        _$insert(_el$21, _$createComponent(Show, {
+          get when() {
+            return tab().props.description;
+          },
+          children: description => (() => {
+            var _el$27 = _$getNextElement(_tmpl$7);
+            _$insert(_el$27, description);
+            return _el$27;
+          })()
+        }), _el$24, _co$6);
+        _$insert(_el$20, () => panelChildren().content, _el$26, _co$7);
+        _$effect(_p$ => {
+          var _v$1 = panelId(tab().props.id),
+            _v$10 = tabId(tab().props.id),
+            _v$11 = tab().props.tone ?? "default";
+          _v$1 !== _p$.e && _$setAttribute(_el$19, "id", _p$.e = _v$1);
+          _v$10 !== _p$.t && _$setAttribute(_el$19, "aria-labelledby", _p$.t = _v$10);
+          _v$11 !== _p$.a && _$setAttribute(_el$19, "data-tone", _p$.a = _v$11);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$19;
+      })()
+    }), _el$10, _co$2);
+    _$insert(_el$0, _$createComponent(Show, {
+      get when() {
+        return panelChildren().footer;
+      },
+      children: footer => (() => {
+        var _el$28 = _$getNextElement(_tmpl$8);
+        _$insert(_el$28, () => footer().props.children);
+        return _el$28;
+      })()
+    }), _el$12, _co$3);
+    _$effect(_p$ => {
+      var _v$8 = `k2b-settings ${props.class ?? ""}`,
+        _v$9 = props.title,
+        _v$0 = messages().sectionsLabel({
+          title: props.title
+        });
+      _v$8 !== _p$.e && _$className(_el$6, _p$.e = _v$8);
+      _v$9 !== _p$.t && _$setAttribute(_el$6, "aria-label", _p$.t = _v$9);
+      _v$0 !== _p$.a && _$setAttribute(_el$9, "aria-label", _p$.a = _v$0);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$6;
+  })();
+};
+SettingsModal.Tab = SettingsModalTab;
+SettingsModal.Group = SettingsModalGroup;
+SettingsModal.Footer = SettingsModalFooter;
+export default SettingsModal;
+_$delegateEvents(["click", "keydown"]);
+//# sourceMappingURL=SettingsModal.js.map