@happyvertical/smrt-svelte 0.37.9 → 0.37.11

package/dist/components/workspace/admin-shell/AppScopePanel.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Badge } from '@happyvertical/smrt-ui/ui';
+import type { Snippet } from 'svelte';
+import { M } from '../../../i18n/strings.workspace.js';
+import ShellSettingsPanel from './ShellSettingsPanel.svelte';
+
+interface Props {
+  appName: string;
+  tenantName?: string;
+  environment?: string;
+  search?: Snippet;
+  docs?: Snippet;
+  switcher?: Snippet;
+  showSettings?: boolean;
+}
+
+let {
+  appName,
+  tenantName = '',
+  environment = '',
+  search,
+  docs,
+  switcher,
+  showSettings = true,
+}: Props = $props();
+const { t } = useI18n();
+</script>
+
+<section
+  class="smrt-app-scope-panel"
+  aria-label={t(M['ui.app_scope_panel.app_scope'])}
+>
+  <header>
+    <div>
+      <h2>{appName}</h2>
+      {#if tenantName}
+        <p>{tenantName}</p>
+      {/if}
+    </div>
+    {#if environment}
+      <Badge variant="info" size="sm">{environment}</Badge>
+    {/if}
+  </header>
+
+  {#if switcher}
+    <div class="smrt-app-scope-panel__section">
+      {@render switcher()}
+    </div>
+  {/if}
+
+  {#if search}
+    <div class="smrt-app-scope-panel__section">
+      {@render search()}
+    </div>
+  {/if}
+
+  {#if docs}
+    <div class="smrt-app-scope-panel__section">
+      {@render docs()}
+    </div>
+  {/if}
+
+  {#if showSettings}
+    <ShellSettingsPanel />
+  {/if}
+</section>
+
+<style>
+  .smrt-app-scope-panel {
+    display: grid;
+    gap: var(--smrt-spacing-5);
+  }
+
+  .smrt-app-scope-panel header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .smrt-app-scope-panel h2,
+  .smrt-app-scope-panel p {
+    margin: 0;
+  }
+
+  .smrt-app-scope-panel p {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-app-scope-panel__section {
+    min-width: 0;
+  }
+</style>

package/dist/components/workspace/admin-shell/AppScopePanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    appName: string;
+    tenantName?: string;
+    environment?: string;
+    search?: Snippet;
+    docs?: Snippet;
+    switcher?: Snippet;
+    showSettings?: boolean;
+}
+declare const AppScopePanel: import("svelte").Component<Props, {}, "">;
+type AppScopePanel = ReturnType<typeof AppScopePanel>;
+export default AppScopePanel;
+//# sourceMappingURL=AppScopePanel.svelte.d.ts.map

package/dist/components/workspace/admin-shell/AppScopePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppScopePanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/AppScopePanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA6DD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/workspace/admin-shell/HotkeyInput.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../../i18n/strings.workspace.js';
+import { formatHotkeyBinding } from './hotkeys.js';
+import type { ShellHotkeyBinding } from './types.js';
+
+interface Props {
+  value?: ShellHotkeyBinding | null;
+  disabled?: boolean;
+  conflictsWith?: string | null;
+  oncapture?: (binding: ShellHotkeyBinding | null) => void;
+}
+
+let {
+  value = null,
+  disabled = false,
+  conflictsWith = null,
+  oncapture,
+}: Props = $props();
+const { t } = useI18n();
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (disabled) return;
+  // Let Tab move focus out of the capture control — swallowing it would trap
+  // keyboard users on the button. (Tab therefore can't be bound as a hotkey.)
+  if (event.key === 'Tab') return;
+  event.preventDefault();
+  if (event.key === 'Backspace' || event.key === 'Delete') {
+    oncapture?.(null);
+    return;
+  }
+  if (!event.code) return;
+  oncapture?.({
+    code: event.code,
+    altKey: event.altKey || undefined,
+    ctrlKey: event.ctrlKey || undefined,
+    metaKey: event.metaKey || undefined,
+    shiftKey: event.shiftKey || undefined,
+  });
+}
+</script>
+
+<div class="smrt-hotkey-input">
+  <Button
+    variant="secondary"
+    size="sm"
+    {disabled}
+    onkeydown={handleKeydown}
+    title={t(M['ui.hotkey_input.capture_title'])}
+  >
+    {formatHotkeyBinding(value)}
+  </Button>
+  {#if conflictsWith}
+    <span class="smrt-hotkey-input__conflict">
+      {t(M['ui.hotkey_input.conflicts_with'])} {conflictsWith}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .smrt-hotkey-input {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    min-width: 0;
+  }
+
+  .smrt-hotkey-input__conflict {
+    color: var(--smrt-color-error);
+    font-size: var(--smrt-typography-body-small-size);
+    overflow-wrap: anywhere;
+  }
+</style>

package/dist/components/workspace/admin-shell/HotkeyInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ShellHotkeyBinding } from './types.js';
+interface Props {
+    value?: ShellHotkeyBinding | null;
+    disabled?: boolean;
+    conflictsWith?: string | null;
+    oncapture?: (binding: ShellHotkeyBinding | null) => void;
+}
+declare const HotkeyInput: import("svelte").Component<Props, {}, "">;
+type HotkeyInput = ReturnType<typeof HotkeyInput>;
+export default HotkeyInput;
+//# sourceMappingURL=HotkeyInput.svelte.d.ts.map

package/dist/components/workspace/admin-shell/HotkeyInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotkeyInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/HotkeyInput.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1D;AAqDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/workspace/admin-shell/ShellCorner.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+interface Props {
+  side: 'left' | 'right';
+  children: Snippet;
+}
+
+let { side, children }: Props = $props();
+</script>
+
+<div class="smrt-shell-corner" data-side={side}>
+  {@render children()}
+</div>
+
+<style>
+  .smrt-shell-corner {
+    inline-size: var(--smrt-admin-shell-left-track);
+    min-inline-size: 0;
+  }
+
+  .smrt-shell-corner[data-side='right'] {
+    inline-size: var(--smrt-admin-shell-right-track);
+  }
+</style>

package/dist/components/workspace/admin-shell/ShellCorner.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    side: 'left' | 'right';
+    children: Snippet;
+}
+declare const ShellCorner: import("svelte").Component<Props, {}, "">;
+type ShellCorner = ReturnType<typeof ShellCorner>;
+export default ShellCorner;
+//# sourceMappingURL=ShellCorner.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ShellCorner.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellCorner.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellCorner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgBD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/workspace/admin-shell/ShellDockTool.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { onDestroy, onMount } from 'svelte';
+import { useAdminShell } from './context.js';
+import type { ShellFocusTool } from './types.js';
+
+interface Props extends ShellFocusTool {}
+
+const shell = useAdminShell();
+const props: Props = $props();
+let unregister: (() => void) | null = null;
+
+onMount(() => {
+  unregister = shell.registerFocusTool(props);
+});
+
+onDestroy(() => {
+  unregister?.();
+});
+</script>

package/dist/components/workspace/admin-shell/ShellDockTool.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ShellFocusTool } from './types.js';
+interface Props extends ShellFocusTool {
+}
+declare const ShellDockTool: import("svelte").Component<Props, {}, "">;
+type ShellDockTool = ReturnType<typeof ShellDockTool>;
+export default ShellDockTool;
+//# sourceMappingURL=ShellDockTool.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ShellDockTool.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellDockTool.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellDockTool.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,UAAU,KAAM,SAAQ,cAAc;CAAG;AAsBzC,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../../i18n/strings.workspace.js';
+import { useAdminShell } from './context.js';
+import HotkeyInput from './HotkeyInput.svelte';
+import { resolveHotkey } from './settings.js';
+import type { PanelEdge, ShellHotkeyBinding } from './types.js';
+
+const { t } = useI18n();
+const shell = useAdminShell();
+const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
+const hotkeysEnabled = $derived(shell.settings.hotkeysEnabled !== false);
+
+function bindingFor(edge: PanelEdge): ShellHotkeyBinding | null {
+  return resolveHotkey(edge, shell.config.panels[edge], shell.settings);
+}
+
+function conflictFor(edge: PanelEdge): string | null {
+  const binding = bindingFor(edge);
+  if (!binding) return null;
+  const conflict = edges.find(
+    (candidate) =>
+      candidate !== edge &&
+      bindingFor(candidate)?.code === binding.code &&
+      bindingFor(candidate)?.altKey === binding.altKey &&
+      bindingFor(candidate)?.ctrlKey === binding.ctrlKey &&
+      bindingFor(candidate)?.metaKey === binding.metaKey &&
+      bindingFor(candidate)?.shiftKey === binding.shiftKey,
+  );
+  return conflict ? shell.config.panels[conflict].label : null;
+}
+</script>
+
+<section
+  class="smrt-shell-settings-panel"
+  aria-label={t(M['ui.shell_settings_panel.shell_settings'])}
+>
+  <header>
+    <div>
+      <h2>{t(M['ui.shell_settings_panel.shell_settings'])}</h2>
+      <p>{t(M['ui.shell_settings_panel.description'])}</p>
+    </div>
+    <Button
+      variant={hotkeysEnabled ? 'secondary' : 'primary'}
+      size="sm"
+      onclick={() => shell.setHotkeysEnabled(!hotkeysEnabled)}
+    >
+      {hotkeysEnabled
+        ? t(M['ui.shell_settings_panel.disable_hotkeys'])
+        : t(M['ui.shell_settings_panel.enable_hotkeys'])}
+    </Button>
+  </header>
+
+  <div class="smrt-shell-settings-panel__grid">
+    {#each edges as edge}
+      {@const panel = shell.config.panels[edge]}
+      {#if shell.panels[edge] !== 'hidden'}
+        <div class="smrt-shell-settings-panel__row">
+          <div>
+            <strong>{panel.label}</strong>
+            <span>{shell.panels[edge]}</span>
+          </div>
+          <div class="smrt-shell-settings-panel__actions">
+            <Button
+              variant="ghost"
+              size="sm"
+              onclick={() =>
+                shell.setPanel(
+                  edge,
+                  shell.panels[edge] === 'expanded'
+                    ? 'collapsed'
+                    : 'expanded',
+                )}
+            >
+              {shell.panels[edge] === 'expanded'
+                ? t(M['ui.shell_settings_panel.collapse'])
+                : t(M['ui.shell_settings_panel.expand'])}
+            </Button>
+            <HotkeyInput
+              value={bindingFor(edge)}
+              disabled={!hotkeysEnabled}
+              conflictsWith={conflictFor(edge)}
+              oncapture={(binding) =>
+                shell.setHotkey(edge, binding?.code ?? null)}
+            />
+          </div>
+        </div>
+      {/if}
+    {/each}
+  </div>
+</section>
+
+<style>
+  .smrt-shell-settings-panel {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .smrt-shell-settings-panel header,
+  .smrt-shell-settings-panel__row,
+  .smrt-shell-settings-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .smrt-shell-settings-panel header,
+  .smrt-shell-settings-panel__row {
+    justify-content: space-between;
+  }
+
+  .smrt-shell-settings-panel h2,
+  .smrt-shell-settings-panel p {
+    margin: 0;
+  }
+
+  .smrt-shell-settings-panel p,
+  .smrt-shell-settings-panel span {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-shell-settings-panel__grid {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .smrt-shell-settings-panel__row {
+    padding-block: var(--smrt-spacing-3);
+    border-block-start: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .smrt-shell-settings-panel__row > div:first-child {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+  }
+
+  @media (max-width: 42rem) {
+    .smrt-shell-settings-panel header,
+    .smrt-shell-settings-panel__row,
+    .smrt-shell-settings-panel__actions {
+      align-items: stretch;
+      flex-direction: column;
+    }
+  }
+</style>

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const ShellSettingsPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ShellSettingsPanel = ReturnType<typeof ShellSettingsPanel>;
+export default ShellSettingsPanel;
+//# sourceMappingURL=ShellSettingsPanel.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ShellSettingsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellSettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShellSettingsPanel.svelte.ts"],"names":[],"mappings":"AA4FA,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/workspace/admin-shell/ShortcutsOverlay.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../../i18n/strings.workspace.js';
+import { useAdminShell } from './context.js';
+import { formatHotkeyBinding } from './hotkeys.js';
+import { resolveHotkey } from './settings.js';
+import type { PanelEdge } from './types.js';
+
+interface Props {
+  onclose?: () => void;
+}
+
+let { onclose }: Props = $props();
+const { t } = useI18n();
+const shell = useAdminShell();
+const edges: PanelEdge[] = ['top', 'left', 'bottom', 'right'];
+</script>
+
+<section
+  class="smrt-shortcuts-overlay"
+  aria-label={t(M['ui.admin_shell.shell_shortcuts'])}
+>
+  <header>
+    <h2>{t(M['ui.admin_shell.shell_shortcuts'])}</h2>
+    <Button
+      variant="ghost"
+      size="sm"
+      aria-label={t(M['ui.admin_shell.close_shortcuts'])}
+      onclick={() => onclose?.()}
+    >
+      {t(M['ui.shortcuts_overlay.close'])}
+    </Button>
+  </header>
+  <dl>
+    {#each edges as edge}
+      <div>
+        <dt>{shell.config.panels[edge].label}</dt>
+        <dd>
+          {formatHotkeyBinding(
+            resolveHotkey(edge, shell.config.panels[edge], shell.settings),
+          )}
+        </dd>
+      </div>
+    {/each}
+    <div>
+      <dt>{t(M['ui.shortcuts_overlay.open_shortcuts'])}</dt>
+      <dd>?</dd>
+    </div>
+    <div>
+      <dt>{t(M['ui.shortcuts_overlay.close_drawer'])}</dt>
+      <dd>{t(M['ui.shortcuts_overlay.escape'])}</dd>
+    </div>
+  </dl>
+</section>
+
+<style>
+  .smrt-shortcuts-overlay {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .smrt-shortcuts-overlay header,
+  .smrt-shortcuts-overlay div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .smrt-shortcuts-overlay h2,
+  .smrt-shortcuts-overlay dl,
+  .smrt-shortcuts-overlay dd {
+    margin: 0;
+  }
+
+  .smrt-shortcuts-overlay dl {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+</style>

package/dist/components/workspace/admin-shell/ShortcutsOverlay.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onclose?: () => void;
+}
+declare const ShortcutsOverlay: import("svelte").Component<Props, {}, "">;
+type ShortcutsOverlay = ReturnType<typeof ShortcutsOverlay>;
+export default ShortcutsOverlay;
+//# sourceMappingURL=ShortcutsOverlay.svelte.d.ts.map

package/dist/components/workspace/admin-shell/ShortcutsOverlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/ShortcutsOverlay.svelte.ts"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkDD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/workspace/admin-shell/SystemScopePanel.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../../i18n/strings.workspace.js';
+import ActivityList from './ActivityList.svelte';
+import type { ShellSystemPanel } from './types.js';
+
+interface Props {
+  panels: ShellSystemPanel[];
+  showActivities?: boolean;
+}
+
+let { panels, showActivities = true }: Props = $props();
+const { t } = useI18n();
+</script>
+
+<section
+  class="smrt-system-scope-panel"
+  aria-label={t(M['ui.system_scope_panel.system_scope'])}
+>
+  {#each panels as panel (panel.id)}
+    <section class="smrt-system-scope-panel__group" aria-label={panel.label}>
+      <header>
+        <h2>{panel.label}</h2>
+        <span>{panel.items.length}</span>
+      </header>
+      {#if panel.items.length > 0}
+        <div class="smrt-system-scope-panel__items">
+          {#each panel.items as item (item.id)}
+            <svelte:element
+              this={item.href ? 'a' : 'span'}
+              href={item.href ?? undefined}
+              class="smrt-system-scope-panel__item"
+              aria-disabled={item.href ? undefined : 'true'}
+            >
+              <strong>{item.label}</strong>
+              <span>{item.status}</span>
+              {#if item.detail}
+                <small>{item.detail}</small>
+              {/if}
+            </svelte:element>
+          {/each}
+        </div>
+      {:else}
+        <p>No {panel.label.toLowerCase()}</p>
+      {/if}
+    </section>
+  {/each}
+
+  {#if showActivities}
+    <section
+      class="smrt-system-scope-panel__group"
+      aria-label={t(M['ui.system_scope_panel.activities'])}
+    >
+      <header>
+        <h2>{t(M['ui.system_scope_panel.activities'])}</h2>
+      </header>
+      <ActivityList
+        filter={{ edge: 'bottom' }}
+        emptyLabel={t(M['ui.system_scope_panel.no_running_work'])}
+      />
+    </section>
+  {/if}
+</section>
+
+<style>
+  .smrt-system-scope-panel {
+    display: grid;
+    gap: var(--smrt-spacing-5);
+  }
+
+  .smrt-system-scope-panel__group,
+  .smrt-system-scope-panel__items {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .smrt-system-scope-panel__group header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .smrt-system-scope-panel h2,
+  .smrt-system-scope-panel p {
+    margin: 0;
+  }
+
+  .smrt-system-scope-panel p,
+  .smrt-system-scope-panel small,
+  .smrt-system-scope-panel__group header span {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-system-scope-panel__item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--smrt-spacing-1) var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3) 0;
+    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    color: var(--smrt-color-on-surface);
+    text-decoration: none;
+  }
+
+  .smrt-system-scope-panel__item[aria-disabled='true'] {
+    color: var(--smrt-color-on-surface-variant);
+    cursor: default;
+  }
+
+  .smrt-system-scope-panel__items strong,
+  .smrt-system-scope-panel__items small {
+    overflow-wrap: anywhere;
+  }
+
+  .smrt-system-scope-panel__items small {
+    grid-column: 1 / -1;
+  }
+</style>

package/dist/components/workspace/admin-shell/SystemScopePanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ShellSystemPanel } from './types.js';
+interface Props {
+    panels: ShellSystemPanel[];
+    showActivities?: boolean;
+}
+declare const SystemScopePanel: import("svelte").Component<Props, {}, "">;
+type SystemScopePanel = ReturnType<typeof SystemScopePanel>;
+export default SystemScopePanel;
+//# sourceMappingURL=SystemScopePanel.svelte.d.ts.map

package/dist/components/workspace/admin-shell/SystemScopePanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemScopePanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/SystemScopePanel.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,UAAU,KAAK;IACb,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmDD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}