@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.56

package/dist/PanelSystem.d.ts

@@ -0,0 +1,45 @@
+export declare const panelSystemFontStack = "var(--index-panel-font, var(--ui-font-family, Aeonik, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif))";
+export declare const panelSystemVarsCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSurfaceCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemBodyCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemTitleCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSectionHeadingCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSubheadingCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemLabelCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemBodyTextCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemValueCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactSectionHeadingCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactSubheadingCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactLabelCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactBodyTextCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactValueCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSectionCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCompactSectionCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemCardCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemMetricCardCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemActionCardCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemControlCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemToggleBarCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemFeatureToggleCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSwitchToggleCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemInputCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemToggleCss: import("styled-components").RuleSet<object>;
+export declare const panelSystemSliderCss: import("styled-components").RuleSet<object>;
+export declare const PanelSystemRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PanelSystemSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const PanelSystemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PanelSystemHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PanelSystemSubheading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const PanelSystemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const PanelSystemCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PanelSystemMetricCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PanelSystemActionCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PanelSystemButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PanelSystemToggleBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PanelSystemFeatureToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PanelSystemSwitchToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PanelSystemToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const PanelSystemInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const PanelSystemSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+export declare const PanelSystemTextarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
+//# sourceMappingURL=PanelSystem.d.ts.map

package/dist/PanelSystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSystem.d.ts","sourceRoot":"","sources":["../src/PanelSystem.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,yJACqH,CAAC;AAEvJ,eAAO,MAAM,kBAAkB,6CAe9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CASjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,6CAS9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,6CAS/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,6CASxC,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CASpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6CAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,6CAQlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6CAS/B,CAAC;AAEF,eAAO,MAAM,mCAAmC,6CAS/C,CAAC;AAEF,eAAO,MAAM,+BAA+B,6CAS3C,CAAC;AAEF,eAAO,MAAM,0BAA0B,6CAQtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,6CAQzC,CAAC;AAEF,eAAO,MAAM,0BAA0B,6CAStC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CAUjC,CAAC;AAEF,eAAO,MAAM,4BAA4B,6CAIxC,CAAC;AAEF,eAAO,MAAM,kBAAkB,6CAM9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CAGpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CAWpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CAajC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6CAYnC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6CAyCvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,6CA6DtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6CAmB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,6CAWhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,6CAyChC,CAAC;AAEF,eAAO,MAAM,eAAe,6NAE3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,uNAE9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,qOAE5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qOAE9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,qOAEjC,CAAC;AAEF,eAAO,MAAM,eAAe,yOAE3B,CAAC;AAEF,eAAO,MAAM,eAAe,6NAE3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yOASjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAG7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yOAEpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yOAEnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAE7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,sOAE5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yOAE7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+OAI/B,CAAC"}

package/dist/PanelSystem.js

@@ -0,0 +1,450 @@
+'use client';
+import styled, { css } from 'styled-components';
+export const panelSystemFontStack = 'var(--index-panel-font, var(--ui-font-family, Aeonik, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif))';
+export const panelSystemVarsCss = css `
+  --panel-system-surface: var(--tenant-panel-background, var(--viewer-ui-color-surface, rgb(255 255 255)));
+  --panel-system-surface-alt: var(--tenant-panel-surface-alt, rgba(249, 250, 251, 0.64));
+  --panel-system-border: var(--tenant-panel-border, var(--viewer-ui-color-panel-border, rgb(229 231 235)));
+  --panel-system-border-subtle: var(
+    --viewer-ui-color-panel-border-subtle,
+    color-mix(in srgb, var(--panel-system-border) 78%, transparent)
+  );
+  --panel-system-text: var(--tenant-panel-text, var(--viewer-ui-color-text-strong, rgb(31 41 55)));
+  --panel-system-muted: var(--tenant-panel-muted, var(--viewer-ui-color-text-muted, rgb(107 114 128)));
+  --panel-system-subtle: var(--tenant-panel-subtle, var(--viewer-ui-color-text-subtle, rgb(107 114 128)));
+  --panel-system-accent: var(--tenant-panel-primary, var(--viewer-ui-color-button-primary, rgb(49 143 78)));
+  --panel-system-action-bg: color-mix(in srgb, var(--panel-system-accent) 10%, var(--panel-system-surface));
+  --panel-system-action-border: color-mix(in srgb, var(--panel-system-accent) 24%, var(--panel-system-border));
+  --panel-system-hover-bg: color-mix(in srgb, var(--panel-system-accent) 8%, var(--panel-system-surface));
+`;
+export const panelSystemSurfaceCss = css `
+  ${panelSystemVarsCss}
+  background: var(--panel-system-surface);
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+
+  * {
+    font-family: inherit;
+  }
+`;
+export const panelSystemBodyCss = css `
+  ${panelSystemSurfaceCss}
+  background:
+    linear-gradient(
+      180deg,
+      var(--panel-system-surface-alt) 0,
+      var(--panel-system-surface) 160px
+    );
+  padding: 18px 22px 22px 16px;
+`;
+export const panelSystemTitleCss = css `
+  margin: 0;
+  color: var(--panel-system-accent, var(--panel-system-text));
+  font-family: ${panelSystemFontStack};
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 1.08;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemSectionHeadingCss = css `
+  margin: 0;
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemSubheadingCss = css `
+  margin: 0;
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.22;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemLabelCss = css `
+  color: var(--panel-system-subtle);
+  font-family: ${panelSystemFontStack};
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemBodyTextCss = css `
+  color: var(--panel-system-muted);
+  font-family: ${panelSystemFontStack};
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.4;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemValueCss = css `
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.4;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+`;
+export const panelSystemCompactSectionHeadingCss = css `
+  margin: 0;
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.22;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemCompactSubheadingCss = css `
+  margin: 0;
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.22;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemCompactLabelCss = css `
+  color: var(--panel-system-subtle);
+  font-family: ${panelSystemFontStack};
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 1.3;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemCompactBodyTextCss = css `
+  color: var(--panel-system-muted);
+  font-family: ${panelSystemFontStack};
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemCompactValueCss = css `
+  color: var(--panel-system-text);
+  font-family: ${panelSystemFontStack};
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 1.35;
+  letter-spacing: 0;
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+`;
+export const panelSystemSectionCss = css `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 0 0 24px;
+  border: 0;
+  border-bottom: 1px solid var(--panel-system-border);
+  background: transparent;
+  border-radius: 0;
+`;
+export const panelSystemCompactSectionCss = css `
+  ${panelSystemSectionCss}
+  gap: 10px;
+  padding-bottom: 16px;
+`;
+export const panelSystemCardCss = css `
+  border: 1px solid var(--panel-system-border);
+  border-radius: 12px;
+  background: var(--panel-system-surface);
+  color: var(--panel-system-text);
+  box-shadow: none;
+`;
+export const panelSystemMetricCardCss = css `
+  ${panelSystemCardCss}
+  padding: 18px 20px;
+`;
+export const panelSystemActionCardCss = css `
+  ${panelSystemCardCss}
+  width: 100%;
+  min-height: 84px;
+  padding: 20px 24px;
+  border-color: var(--panel-system-action-border);
+  background: var(--panel-system-action-bg);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  text-align: left;
+`;
+export const panelSystemControlCss = css `
+  min-height: 34px;
+  border-radius: 4px;
+  border: 1px solid var(--panel-system-border-subtle);
+  background: var(--panel-system-surface);
+  color: var(--panel-system-muted);
+  padding: 0 13px;
+  font-family: ${panelSystemFontStack};
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-transform: none;
+`;
+export const panelSystemToggleBarCss = css `
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const panelSystemFeatureToggleCss = css `
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-height: 28px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  background: var(--panel-system-toggle-bg, rgba(255, 255, 255, 0.6));
+  color: var(--panel-system-toggle-fg, rgb(0 0 0));
+  font-family: ${panelSystemFontStack};
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
+
+  &[data-active='true'],
+  &[aria-pressed='true'],
+  &[aria-checked='true'],
+  &[aria-selected='true'] {
+    background: var(--panel-system-accent, var(--brand-primary, rgb(49 143 78)));
+    color: var(--viewer-ui-color-button-primary-text, rgb(255 255 255));
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.58;
+  }
+`;
+export const panelSystemSwitchToggleCss = css `
+  ${panelSystemVarsCss}
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--panel-system-toggle-fg, rgb(0 0 0));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0;
+  font-family: ${panelSystemFontStack};
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  text-transform: none;
+  white-space: nowrap;
+
+  .panel-system-switch-track {
+    position: relative;
+    box-sizing: content-box;
+    width: 12px;
+    height: 12px;
+    padding: 7px 16px;
+    border: 1px solid var(--panel-system-toggle-border, rgb(0 0 0));
+    border-radius: 18px;
+    background: var(--panel-system-surface, rgb(255 255 255));
+    flex: 0 0 auto;
+  }
+
+  .panel-system-switch-thumb {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--panel-system-toggle-fg, rgb(0 0 0));
+    transform: translateY(-50%);
+    transition: left 160ms ease, background-color 160ms ease;
+  }
+
+  .panel-system-switch-label {
+    color: var(--panel-system-text);
+    transition: color 150ms ease;
+  }
+
+  &[data-active='true'],
+  &[aria-expanded='true'] {
+    .panel-system-switch-thumb {
+      left: 21px;
+      background: var(--panel-system-accent, var(--brand-primary, rgb(49 143 78)));
+    }
+  }
+
+  &:hover .panel-system-switch-label {
+    color: var(--panel-system-accent, var(--brand-primary, rgb(49 143 78)));
+  }
+`;
+export const panelSystemInputCss = css `
+  width: 100%;
+  min-height: 34px;
+  border-radius: 4px;
+  border: 1px solid var(--panel-system-border);
+  background: var(--panel-system-surface);
+  color: var(--panel-system-text);
+  padding: 7px 10px;
+  font-family: ${panelSystemFontStack};
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.25;
+  letter-spacing: 0;
+  outline: none;
+
+  &:focus {
+    border-color: var(--panel-system-accent);
+    box-shadow: none;
+  }
+`;
+export const panelSystemToggleCss = css `
+  ${panelSystemControlCss}
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+
+  &[data-active='true'],
+  &[aria-pressed='true'] {
+    border-color: var(--panel-system-accent);
+    background: var(--panel-system-accent);
+    color: var(--viewer-ui-color-button-primary-text, rgb(255 255 255));
+  }
+`;
+export const panelSystemSliderCss = css `
+  width: 100%;
+  height: 14px;
+  padding: 0;
+  display: block;
+  accent-color: var(--panel-system-accent);
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 3px;
+    border-radius: 999px;
+    background: var(--panel-system-border-subtle);
+  }
+
+  &::-moz-range-track {
+    height: 3px;
+    border-radius: 999px;
+    background: var(--panel-system-border-subtle);
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 10px;
+    height: 10px;
+    margin-top: -3.5px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--panel-system-accent);
+    box-shadow: none;
+  }
+
+  &::-moz-range-thumb {
+    width: 10px;
+    height: 10px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--panel-system-accent);
+    box-shadow: none;
+  }
+`;
+export const PanelSystemRoot = styled.div `
+  ${panelSystemBodyCss}
+`;
+export const PanelSystemSection = styled.section `
+  ${panelSystemSectionCss}
+`;
+export const PanelSystemTitle = styled.h1 `
+  ${panelSystemTitleCss}
+`;
+export const PanelSystemHeading = styled.h2 `
+  ${panelSystemSectionHeadingCss}
+`;
+export const PanelSystemSubheading = styled.h3 `
+  ${panelSystemSubheadingCss}
+`;
+export const PanelSystemText = styled.p `
+  ${panelSystemBodyTextCss}
+`;
+export const PanelSystemCard = styled.div `
+  ${panelSystemCardCss}
+`;
+export const PanelSystemMetricCard = styled.div `
+  ${panelSystemMetricCardCss}
+`;
+export const PanelSystemActionCard = styled.button `
+  ${panelSystemActionCardCss}
+  cursor: pointer;
+  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
+
+  &:hover {
+    border-color: var(--panel-system-accent);
+    background: color-mix(in srgb, var(--panel-system-accent) 14%, var(--panel-system-surface));
+  }
+`;
+export const PanelSystemButton = styled.button `
+  ${panelSystemControlCss}
+  cursor: pointer;
+`;
+export const PanelSystemToggleBar = styled.div `
+  ${panelSystemToggleBarCss}
+`;
+export const PanelSystemFeatureToggle = styled.button `
+  ${panelSystemFeatureToggleCss}
+`;
+export const PanelSystemSwitchToggle = styled.button `
+  ${panelSystemSwitchToggleCss}
+`;
+export const PanelSystemToggle = styled.button `
+  ${panelSystemToggleCss}
+`;
+export const PanelSystemInput = styled.input `
+  ${panelSystemInputCss}
+`;
+export const PanelSystemSelect = styled.select `
+  ${panelSystemInputCss}
+`;
+export const PanelSystemTextarea = styled.textarea `
+  ${panelSystemInputCss}
+  min-height: 96px;
+  resize: vertical;
+`;

package/dist/PanelTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AA+CA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAU9E"}
+{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../src/PanelTabs.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAiB9E"}

package/dist/PanelTabs.js

@@ -1,43 +1,17 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
+import { panelSystemFeatureToggleCss, panelSystemToggleBarCss, panelSystemVarsCss } from './PanelSystem.js';
 const TabRow = styled.div `
-  display: flex;
-  gap: 8px;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--viewer-ui-color-panel-border, var(--brand-panel-border));
-  margin-bottom: 6px;
+  ${panelSystemVarsCss}
+  ${panelSystemToggleBarCss}
+  justify-content: flex-start;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--panel-system-border);
 `;
 const TabButton = styled.button `
-  border-radius: 999px;
-  padding: 8px 14px;
-  font-size: 11px;
-  font-weight: ${(props) => (props.$active ? 600 : 500)};
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  border: 1px solid
-    ${(props) => props.$active
-    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
-    : 'var(--viewer-ui-color-panel-border-subtle, var(--brand-panel-border))'};
-  background: ${(props) => props.$active
-    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
-    : 'var(--viewer-ui-color-tab-bg, transparent)'};
-  color: ${(props) => props.$active
-    ? 'var(--viewer-ui-color-text-strong, #ffffff)'
-    : 'var(--viewer-ui-color-text-muted, var(--brand-text-secondary))'};
-  cursor: pointer;
-  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
-
-  &:hover {
-    border-color: var(--viewer-ui-color-button-secondary, var(--brand-primary));
-    background: ${(props) => props.$active
-    ? 'var(--viewer-ui-color-button-secondary, var(--brand-primary))'
-    : 'var(--viewer-ui-color-tab-bg-hover, rgba(47, 74, 60, 0.08))'};
-    color: var(--viewer-ui-color-text-strong, var(--brand-text-primary));
-  }
+  ${panelSystemFeatureToggleCss}
 `;
 export default function PanelTabs({ tabs, activeTab, onChange }) {
-    return (_jsx(TabRow, { children: tabs.map((tab) => (_jsx(TabButton, { type: "button", "$active": tab.id === activeTab, onClick: () => onChange(tab.id), children: tab.label }, tab.id))) }));
+    return (_jsx(TabRow, { role: "tablist", "aria-label": "Composer panel", children: tabs.map((tab) => (_jsx(TabButton, { type: "button", role: "tab", "aria-selected": tab.id === activeTab, "data-active": tab.id === activeTab ? 'true' : 'false', onClick: () => onChange(tab.id), children: tab.label }, tab.id))) }));
 }

package/dist/PanelToggleDock.d.ts

@@ -0,0 +1,10 @@
+export type PanelToggleDockProps = {
+    topOffsetPx?: number;
+    placement?: 'fixed' | 'absolute';
+    collapsed?: boolean;
+    hidden?: boolean;
+    onToggle?: () => void;
+    label?: string;
+};
+export default function PanelToggleDock({ topOffsetPx, placement, collapsed, hidden, onToggle, label, }: PanelToggleDockProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PanelToggleDock.d.ts.map

package/dist/PanelToggleDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelToggleDock.d.ts","sourceRoot":"","sources":["../src/PanelToggleDock.tsx"],"names":[],"mappings":"AAmCA,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,WAAe,EACf,SAAmB,EACnB,SAAiB,EACjB,MAAc,EACd,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,kDA2CtB"}

package/dist/PanelToggleDock.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Dock = styled.div `
+  position: ${(props) => props.$placement};
+  left: 50%;
+  top: ${(props) => `${Math.max(0, props.$topOffsetPx - 1)}px`};
+  transform: translateX(-50%);
+  z-index: 75;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+`;
+const LabelButton = styled.button `
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  color: rgba(47, 74, 60, 0.72);
+  font-size: 11px;
+  letter-spacing: 0;
+  text-transform: none;
+  transition: color 0.16s ease;
+
+  &:hover {
+    color: rgba(20, 40, 29, 0.94);
+  }
+
+  @media (max-width: 900px) {
+    display: none;
+  }
+`;
+export default function PanelToggleDock({ topOffsetPx = 0, placement = 'fixed', collapsed = false, hidden = false, onToggle, label, }) {
+    if (hidden || !onToggle) {
+        return null;
+    }
+    const ariaLabel = collapsed ? 'Show panels' : 'Hide panels';
+    const visibleLabel = collapsed ? 'show panels' : (label ?? 'toggle panels');
+    return (_jsxs(Dock, { "$topOffsetPx": topOffsetPx, "$placement": placement, children: [_jsx("button", { type: "button", "aria-label": ariaLabel, title: label ?? ariaLabel, className: "collapse-toggle collapse-toggle--edge-top", onClick: onToggle, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: collapsed ? (_jsx("path", { fillRule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.25 8.27a.75.75 0 01-.02-1.06z", clipRule: "evenodd" })) : (_jsx("path", { fillRule: "evenodd", d: "M5.23 12.79a.75.75 0 001.06-.02L10 9.06l3.71 3.71a.75.75 0 001.06-1.06L10.53 7.47a.75.75 0 00-1.06 0L4.23 11.75a.75.75 0 001 1.04z", clipRule: "evenodd" })) }) }), _jsx(LabelButton, { type: "button", "aria-label": visibleLabel, title: visibleLabel, onClick: onToggle, children: visibleLabel })] }));
+}

package/dist/PromptPackChooserPanel.d.ts

@@ -1,20 +1,21 @@
+import type { PromptPackCatalogEntry } from '@treasuryspatial/render-kit';
 export type PromptPackChooserMode = string;
-export type PromptPackChooserCatalogEntry = {
-    id: string;
-    label: string;
-    version?: string;
-    description?: string;
-};
+export type PromptPackChooserCatalogEntry = Pick<PromptPackCatalogEntry, 'id' | 'label' | 'description' | 'modes' | 'chooserLabel'>;
 type PromptPackChooserPanelProps = {
     modes?: PromptPackChooserMode[];
-    labelsByMode: Record<string, string>;
-    selectedByMode?: Partial<Record<PromptPackChooserMode, string>>;
-    catalog: PromptPackChooserCatalogEntry[];
-    onSelect: (mode: PromptPackChooserMode, packId: string) => void;
+    labelsByMode?: Record<string, string>;
+    noteByMode?: Partial<Record<PromptPackChooserMode, string>>;
+    activePackId?: string;
+    selectedPackId?: string;
+    catalog?: PromptPackChooserCatalogEntry[];
+    onSelect?: (packId: string) => void;
     onReset?: () => void;
+    status?: 'ready' | 'loading' | 'error';
+    error?: string | null;
     activeLabel: string;
     activeDescription?: string;
+    activeWarning?: boolean;
 };
-export default function PromptPackChooserPanel({ modes, labelsByMode, selectedByMode, catalog, onSelect, onReset, activeLabel, activeDescription, }: PromptPackChooserPanelProps): import("react/jsx-runtime").JSX.Element;
+export default function PromptPackChooserPanel({ modes, labelsByMode, noteByMode, activePackId, selectedPackId, catalog, onSelect, onReset, status, error, activeLabel, activeDescription, activeWarning, }: PromptPackChooserPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PromptPackChooserPanel.d.ts.map

package/dist/PromptPackChooserPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptPackChooserPanel.d.ts","sourceRoot":"","sources":["../src/PromptPackChooserPanel.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,6BAA6B,GAAG;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAChE,OAAO,EAAE,6BAA6B,EAAE,CAAC;IACzC,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA6FF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,KAAK,EACL,YAAY,EACZ,cAAmB,EACnB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,GAClB,EAAE,2BAA2B,2CAqC7B"}
+{"version":3,"file":"PromptPackChooserPanel.d.ts","sourceRoot":"","sources":["../src/PromptPackChooserPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAa1E,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,sBAAsB,EACtB,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,OAAO,GAAG,cAAc,CAC1D,CAAC;AA8CF,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AA4FF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,KAAK,EACL,YAAiB,EACjB,UAAe,EACf,YAAY,EACZ,cAAmB,EACnB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAgB,EAChB,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,aAAqB,GACtB,EAAE,2BAA2B,2CAgF7B"}