@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0

package/DS1/2-core/ds-chart.ts

@@ -1,6 +1,5 @@
-import { html, LitElement, nothing, unsafeCSS, type PropertyValues } from "lit";
-import { property, state } from "lit/decorators.js";
-import { type DataPoint, drawSparkline, GridChart, type Marker, type Series, type SeriesKind } from "./chart/grid-chart";
+import { html, LitElement, nothing, unsafeCSS, type PropertyDeclarations, type PropertyValues } from "lit";
+import { type DataPoint, drawSparkline, GridChart, type Marker, type Series, type SeriesKind, STEPS } from "./chart/grid-chart";
 
 import { define } from "../0-face/define";
 import styles from "./chart/chart.css?inline";
@@ -8,9 +7,19 @@ export * from "./chart/grid-chart";
 
 /** Independent chart configuration; no module-wide size or theme state. */
 export class ChartElement extends LitElement {
+  static properties: PropertyDeclarations = {
+    unit: { type: Number },
+    grid: {},
+  };
   static styles = unsafeCSS(styles);
-  @property({ type: Number }) unit = 20;
-  @property() grid: "full" | "rows" | "none" = "rows";
+  declare unit: number;
+  declare grid: "full" | "rows" | "none";
+
+  constructor() {
+    super();
+    this.unit = 20;
+    this.grid = "rows";
+  }
   private media?: MediaQueryList;
   private themeChanged = () => this.refreshTheme();
   connectedCallback(): void {
@@ -43,22 +52,53 @@ function observeWidth(element: HTMLElement, callback: (width: number) => void):
 }
 
 export class GridLineChart extends ChartElement {
+  static properties: PropertyDeclarations = {
+    data: { attribute: false },
+    kind: {},
+    base: { type: Number },
+    color: {},
+    rows: { type: Number },
+    markers: { attribute: false },
+    timeRange: { attribute: false },
+    extremes: { type: Boolean },
+    labels: { type: Boolean },
+    live: { type: Boolean },
+    format: { attribute: false },
+    drawKey: {},
+    dot: { state: true },
+  };
   connectedCallback(): void { this.dataset.chartKind = "line"; super.connectedCallback(); }
-  @property({ attribute: false }) data: DataPoint[] = [];
-  @property() kind: SeriesKind = "area";
-  @property({ type: Number }) base?: number;
-  @property() color = "--ds-chart-ink";
-  @property({ type: Number }) rows = 8;
-  @property({ attribute: false }) markers: Marker[] = [];
-  @property({ attribute: false }) timeRange: [number, number] | null = null;
-  @property({ type: Boolean }) extremes = false;
-  @property({ type: Boolean }) labels = false;
-  @property({ type: Boolean }) live = false;
-  @property({ attribute: false }) format: (value: number) => string = (v) => v.toFixed(2);
+  declare data: DataPoint[];
+  declare kind: SeriesKind;
+  declare base: number | undefined;
+  declare color: string;
+  declare rows: number;
+  declare markers: Marker[];
+  declare timeRange: [number, number] | null;
+  declare extremes: boolean;
+  declare labels: boolean;
+  declare live: boolean;
+  declare format: (value: number) => string;
   /** Changing this replays the draw-in. */
-  @property() drawKey = "";
-
-  @state() private dot: { x: number; y: number } | null = null;
+  declare drawKey: string;
+
+  private declare dot: { x: number; y: number } | null;
+
+  constructor() {
+    super();
+    this.data = [];
+    this.kind = "area";
+    this.color = "--ds-chart-ink";
+    this.rows = 8;
+    this.markers = [];
+    this.timeRange = null;
+    this.extremes = false;
+    this.labels = false;
+    this.live = false;
+    this.format = (v) => v.toFixed(2);
+    this.drawKey = "";
+    this.dot = null;
+  }
 
   private chart?: GridChart;
   private series?: Series;
@@ -182,10 +222,21 @@ export class GridLineChart extends ChartElement {
 }
 
 export class GridSpark extends ChartElement {
+  static properties: PropertyDeclarations = {
+    values: { attribute: false },
+    base: { type: Number },
+    cols: { type: Number },
+  };
   connectedCallback(): void { this.dataset.chartKind = "spark"; super.connectedCallback(); }
-  @property({ attribute: false }) values: number[] = [];
-  @property({ type: Number }) base?: number;
-  @property({ type: Number }) cols = 4;
+  declare values: number[];
+  declare base: number | undefined;
+  declare cols: number;
+
+  constructor() {
+    super();
+    this.values = [];
+    this.cols = 4;
+  }
   refreshTheme(): void { this.draw(); }
 
   render() {
@@ -222,39 +273,105 @@ export interface BarItem {
   caption?: string;
 }
 
+/**
+ * The round size each square of a bar chart stands for (the line chart's steps: 1, 2, 2.5 and 5 times
+ * a power of ten), the smallest with which `max` fits in `squares`.
+ */
+export function barStep(max: number, squares: number): number {
+  return STEPS.find((step) => Math.ceil(max / step) <= Math.max(1, squares)) ?? STEPS[STEPS.length - 1]!;
+}
+
+const compact = new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 });
+
 export class GridBars extends ChartElement {
+  static properties: PropertyDeclarations = {
+    items: { attribute: false },
+    rows: { type: Number },
+    span: { type: Number },
+    axis: { type: Boolean, reflect: true },
+    values: { type: Boolean, reflect: true },
+    fill: { type: Boolean, reflect: true },
+    format: { attribute: false },
+  };
   connectedCallback(): void { this.dataset.chartKind = "bars"; super.connectedCallback(); }
-  @property({ attribute: false }) items: BarItem[] = [];
-  @property({ type: Number }) rows = 4;
-  @property({ type: Number }) span = 2;
+  declare items: BarItem[];
+  declare rows: number;
+  declare span: number;
+  /** A scale at the end, two squares wide: each square of the area one round step, labelled just above its line, the lines across the bars. */
+  declare axis: boolean;
+  /** Each bar's value written over it, by `format`. */
+  declare values: boolean;
+  /** The bars share the width left beside the scale, in whole pixels, instead of `span` squares each. */
+  declare fill: boolean;
+  /** Writes the scale's labels and the values over the bars. */
+  declare format: (value: number) => string;
+
+  constructor() {
+    super();
+    this.items = [];
+    this.rows = 4;
+    this.span = 2;
+    this.axis = false;
+    this.values = false;
+    this.fill = false;
+    this.format = (value) => compact.format(value);
+  }
 
   render() {
-    const height = (this.rows - 1) * this.unit;
+    const squares = Math.max(1, this.rows - 1);
+    const height = squares * this.unit;
     const max = Math.max(...this.items.flatMap((item) => [item.value, item.compare ?? 0]), 1e-9);
-    const px = (v: number) => Math.max(1, Math.round((v / max) * (height - 4)));
+    // With a scale, a square is a step, so the bars stand on its lines; a value over the tallest
+    // keeps its square above it.
+    const step = this.axis ? barStep(max, squares - (this.values ? 1 : 0)) : 0;
+    const room = height - 4 - (this.values ? this.unit : 0);
+    const px = (v: number) => Math.max(1, Math.round(this.axis ? (v / step) * this.unit : (v / max) * room));
+    const captions = this.items.some((item) => item.caption);
+    const lines = this.axis ? Array.from({ length: squares }, (_, i) => i + 1).filter((row) => row * step <= max + step) : [];
     return html`<div class="bars" style="--span: ${this.span}">
-      ${this.items.map(
-        (item) => html`<div class="bar-cell">
-          <div class="bar-area" style="height: ${height}px">
-            ${item.compare !== undefined
-              ? html`<span class="bar-compare" style="height: ${px(item.compare)}px"></span>`
-              : nothing}
-            ${item.value > 0
-              ? html`<span class="bar-fill ${item.tone ?? "ink"}" style="height: ${px(item.value)}px"></span>`
-              : nothing}
-          </div>
-          <span class="bar-caption">${item.caption ?? ""}</span>
-          <span class="bar-label">${item.label}</span>
-        </div>`,
-      )}
+      <div class="bar-columns">
+        ${this.axis ? html`<span class="bar-guides" style="top: ${height - lines.length * this.unit}px; height: ${lines.length * this.unit}px" aria-hidden="true"></span>` : nothing}
+        ${this.items.map(
+          (item) => html`<div class="bar-cell">
+            <div class="bar-area" style="height: ${height}px">
+              ${item.compare !== undefined
+                ? html`<span class="bar-compare" style="height: ${px(item.compare)}px"></span>`
+                : nothing}
+              ${item.value > 0
+                ? html`<span class="bar-fill ${item.tone ?? "ink"}" style="height: ${px(item.value)}px"></span>`
+                : nothing}
+              ${this.values && item.value > 0
+                ? html`<span class="bar-value" style="bottom: ${px(item.value) + 2}px">${this.format(item.value)}</span>`
+                : nothing}
+            </div>
+            ${captions ? html`<span class="bar-caption">${item.caption ?? ""}</span>` : nothing}
+            <span class="bar-label">${item.label}</span>
+          </div>`,
+        )}
+      </div>
+      ${this.axis
+        ? html`<div class="bar-axis" style="height: ${height}px" aria-hidden="true">
+            ${lines.map((row) => html`<span class="bar-tick" style="bottom: ${row * this.unit}px">${this.format(row * step)}</span>`)}
+          </div>`
+        : nothing}
     </div>`;
   }
 }
 
 export class GridRatio extends ChartElement {
+  static properties: PropertyDeclarations = {
+    value: { type: Number },
+    width: { state: true },
+  };
   connectedCallback(): void { this.dataset.chartKind = "ratio"; super.connectedCallback(); }
-  @property({ type: Number }) value = 0.5;
-  @state() private width = 0;
+  declare value: number;
+  private declare width: number;
+
+  constructor() {
+    super();
+    this.value = 0.5;
+    this.width = 0;
+  }
   private observer?: ResizeObserver;
 
   protected initialize(): void {
@@ -283,13 +400,31 @@ export interface RangeMark {
 }
 
 export class GridRange extends ChartElement {
+  static properties: PropertyDeclarations = {
+    min: { type: Number },
+    max: { type: Number },
+    from: { type: Number },
+    to: { type: Number },
+    marks: { attribute: false },
+    width: { state: true },
+  };
   connectedCallback(): void { this.dataset.chartKind = "range"; super.connectedCallback(); }
-  @property({ type: Number }) min = 0;
-  @property({ type: Number }) max = 1;
-  @property({ type: Number }) from = 0;
-  @property({ type: Number }) to = 1;
-  @property({ attribute: false }) marks: RangeMark[] = [];
-  @state() private width = 0;
+  declare min: number;
+  declare max: number;
+  declare from: number;
+  declare to: number;
+  declare marks: RangeMark[];
+  private declare width: number;
+
+  constructor() {
+    super();
+    this.min = 0;
+    this.max = 1;
+    this.from = 0;
+    this.to = 1;
+    this.marks = [];
+    this.width = 0;
+  }
   private observer?: ResizeObserver;
 
   protected initialize(): void {

package/DS1/2-core/ds-cycle.ts

@@ -11,6 +11,7 @@ import type { LanguageCode } from "../0-face/i18n";
 import { LANGUAGE_METADATA, isLanguage, normalizeLanguage } from "../0-face/languages";
 import { currentThemeMode, setThemeMode, THEME_MODES } from "../0-face/theme";
 import type { ThemeMode } from "../0-face/theme";
+import { getShape, setShape, SHAPES, type Shape } from "../0-face/shape";
 import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
@@ -31,24 +32,6 @@ const applyAccentColor = () => {
   document.documentElement.style.setProperty("--accent-color", `var(${color})`);
 };
 
-// Notes style medium utilities
-const saveNotesStyleMedium = (style: string) => {
-  localStorage.setItem("notesStyleMedium", style);
-};
-
-const getNotesStyleMedium = (): string => {
-  return localStorage.getItem("notesStyleMedium") || "note"; // Default to note
-};
-
-// Note behavior utilities
-const savePageStyle = (style: string) => {
-  localStorage.setItem("pageStyle", style);
-};
-
-const getPageStyle = (): string => {
-  return localStorage.getItem("pageStyle") || "note"; // Default to note
-};
-
 // App width utilities removed
 
 // The settings a cycle knows by name. Any other cycle steps through its own
@@ -65,7 +48,7 @@ export function nativeLanguageName(code: string): string {
   return getLanguageDisplayName(code, { locale: code });
 }
 
-const SETTINGS = new Set(["language", "theme", "accent-color", "notes-style-medium", "page-style", "icon-only"]);
+const SETTINGS = new Set(["language", "theme", "shape", "accent-color"]);
 
 // Use a regular class with proper TypeScript type declarations and JSDoc comments
 export class Cycle extends LitElement {
@@ -120,7 +103,6 @@ export class Cycle extends LitElement {
     handleLanguageChanged: EventListener;
     handleThemeChanged: EventListener;
     handleAccentColorChanged: EventListener;
-    handleNoteBehaviorChanged: EventListener;
   };
 
   constructor() {
@@ -148,7 +130,6 @@ export class Cycle extends LitElement {
       handleLanguageChanged: this.handleLanguageChanged.bind(this),
       handleThemeChanged: this.handleThemeChanged.bind(this),
       handleAccentColorChanged: this.handleAccentColorChanged.bind(this),
-      handleNoteBehaviorChanged: this.handleNoteBehaviorChanged.bind(this),
     };
   }
 
@@ -172,14 +153,11 @@ export class Cycle extends LitElement {
       "theme-changed",
       this.boundHandlers.handleThemeChanged
     );
+    window.addEventListener("shape-changed", this.onShapeChanged);
     window.addEventListener(
       "accent-color-changed",
       this.boundHandlers.handleAccentColorChanged
     );
-    window.addEventListener(
-      "page-style-changed",
-      this.boundHandlers.handleNoteBehaviorChanged
-    );
 
     // Initialize the component
     this.initializeValues();
@@ -196,6 +174,10 @@ export class Cycle extends LitElement {
       // Light, dark and the system's, the stored choice
       this.values = [...THEME_MODES];
       this.currentValue = currentThemeMode.get();
+    } else if (this.type === "shape") {
+      // Square, rounded and circular, the stored choice
+      this.values = [...SHAPES];
+      this.currentValue = getShape();
     } else if (this.type === "accent-color") {
       // Set up accent color cycling
       this.values = [
@@ -215,30 +197,6 @@ export class Cycle extends LitElement {
 
       // Apply the accent color to ensure it's active
       applyAccentColor();
-    } else if (this.type === "notes-style-medium") {
-      // Set up notes style medium cycling
-      this.values = ["default", "big", "gallery"];
-
-      // Set initial value based on current notes style medium
-      const currentNotesStyle = getNotesStyleMedium();
-      this.currentValue = currentNotesStyle;
-
-      // Check if this should be disabled based on note behavior
-      const currentPageStyle = getPageStyle();
-      this.disabled = currentPageStyle === "note";
-    } else if (this.type === "page-style") {
-      // Set up page style cycling
-      this.values = ["note", "page"];
-
-      // Set initial value based on current page style
-      const currentPageStyle = getPageStyle();
-      this.currentValue = currentPageStyle;
-    } else if (this.type === "icon-only") {
-      // Set up icon-only cycling (no label)
-      this.values = ["note", "page"];
-
-      // Set initial value
-      this.currentValue = this.values[0];
     }
 
     // Request update to re-render with new values
@@ -262,6 +220,8 @@ export class Cycle extends LitElement {
     } else if (this.type === "theme") {
       // The stored choice, which may be the system's
       this.currentValue = currentThemeMode.get();
+    } else if (this.type === "shape") {
+      this.currentValue = getShape();
     } else if (this.type === "accent-color") {
       // Get current accent color
       const currentAccentColor = getAccentColor();
@@ -269,22 +229,6 @@ export class Cycle extends LitElement {
 
       // Apply the accent color to ensure it's active
       applyAccentColor();
-    } else if (this.type === "notes-style-medium") {
-      // Get current notes style medium
-      const currentNotesStyle = getNotesStyleMedium();
-      this.currentValue = currentNotesStyle;
-
-      // Check if this should be disabled based on note behavior
-      const currentPageStyle = getPageStyle();
-      this.disabled = currentPageStyle === "note";
-    } else if (this.type === "page-style") {
-      // Get current page style
-      const currentPageStyle = getPageStyle();
-      this.currentValue = currentPageStyle;
-    } else if (this.type === "icon-only") {
-      // Get current page style for icon-only
-      const currentPageStyle = getPageStyle();
-      this.currentValue = currentPageStyle;
     }
 
     this.requestUpdate();
@@ -311,14 +255,11 @@ export class Cycle extends LitElement {
       "theme-changed",
       this.boundHandlers.handleThemeChanged
     );
+    window.removeEventListener("shape-changed", this.onShapeChanged);
     window.removeEventListener(
       "accent-color-changed",
       this.boundHandlers.handleAccentColorChanged
     );
-    window.removeEventListener(
-      "page-style-changed",
-      this.boundHandlers.handleNoteBehaviorChanged
-    );
   }
 
   handleButtonClick(e: Event) {
@@ -367,6 +308,11 @@ export class Cycle extends LitElement {
       savePreferences({ theme: newTheme as ThemeMode });
 
       // Theme helper already emits the change event, so no manual dispatch here
+    } else if (this.type === "shape") {
+      const next = this.values[(this.values.indexOf(this.currentValue) + 1) % this.values.length];
+      this.currentValue = next;
+      // The runtime stores it, marks the root and emits shape-changed
+      setShape(next as Shape);
     } else if (this.type === "accent-color") {
       // Cycle through accent colors
       const currentIndex = this.values.indexOf(this.currentValue);
@@ -391,69 +337,6 @@ export class Cycle extends LitElement {
           detail: { color: newColor },
         })
       );
-    } else if (this.type === "notes-style-medium") {
-      // Cycle through notes style medium options
-      const currentIndex = this.values.indexOf(this.currentValue);
-      const nextIndex = (currentIndex + 1) % this.values.length;
-      const newStyle = this.values[nextIndex];
-
-      // Update current value
-      this.currentValue = newStyle;
-
-      // Save the new notes style medium
-      saveNotesStyleMedium(newStyle);
-
-      // Save preferences
-      savePreferences({ notesStyleMedium: newStyle });
-
-      // Dispatch notes style medium change event
-      window.dispatchEvent(
-        new CustomEvent("notes-style-medium-changed", {
-          detail: { style: newStyle },
-        })
-      );
-    } else if (this.type === "page-style") {
-      // Cycle through note behavior options
-      const currentIndex = this.values.indexOf(this.currentValue);
-      const nextIndex = (currentIndex + 1) % this.values.length;
-      const newBehavior = this.values[nextIndex];
-
-      // Update current value
-      this.currentValue = newBehavior;
-
-      // Save the new note behavior
-      savePageStyle(newBehavior);
-
-      // Save preferences
-      savePreferences({ pageStyle: newBehavior });
-
-      // Dispatch note behavior change event
-      window.dispatchEvent(
-        new CustomEvent("page-style-changed", {
-          detail: { behavior: newBehavior },
-        })
-      );
-    } else if (this.type === "icon-only") {
-      // Cycle through icon-only options (note/page)
-      const currentIndex = this.values.indexOf(this.currentValue);
-      const nextIndex = (currentIndex + 1) % this.values.length;
-      const newIconOnlyValue = this.values[nextIndex];
-
-      // Update current value
-      this.currentValue = newIconOnlyValue;
-
-      // Save the new page style
-      savePageStyle(newIconOnlyValue);
-
-      // Save preferences
-      savePreferences({ pageStyle: newIconOnlyValue });
-
-      // Dispatch page style change event
-      window.dispatchEvent(
-        new CustomEvent("page-style-changed", {
-          detail: { behavior: newIconOnlyValue },
-        })
-      );
     } else if (!SETTINGS.has(this.type)) {
       const next = this.values[(this.values.indexOf(this.currentValue) + 1) % this.values.length];
       this.currentValue = this.value = next;
@@ -464,9 +347,19 @@ export class Cycle extends LitElement {
     this.requestUpdate();
   }
 
+  /** Another control, or another tab, chose a shape. */
+  private onShapeChanged = (): void => {
+    if (this.type === "shape") this.setupInitialValue();
+  };
+
   getValueDisplay(value: string): string | any {
     if (this.type === "language") {
       return nativeLanguageName(value);
+    } else if (this.type === "shape") {
+      // Square, Rounded or Circular, in the shared words
+      const word = value.charAt(0).toUpperCase() + value.slice(1);
+      const translated = this.translationsReady ? translate(word) : "";
+      return translated && translated !== word ? translated : word;
     } else if (this.type === "theme") {
       // Try to get translated theme name
       if (this.translationsReady) {
@@ -481,29 +374,6 @@ export class Cycle extends LitElement {
     } else if (this.type === "accent-color") {
       // Get color name from CSS variable
       return this.getColorName(value);
-    } else if (this.type === "notes-style-medium") {
-      // Return SVG icon for notes style medium
-      return this.getNotesStyleIcon(value);
-    } else if (this.type === "page-style") {
-      // Return translated text for note behavior
-      if (this.translationsReady) {
-        const translatedText = translate(value === "note" ? "Note" : "Page");
-        if (
-          translatedText &&
-          translatedText !== (value === "note" ? "Note" : "Page")
-        ) {
-          return translatedText;
-        }
-      }
-      return value;
-    } else if (this.type === "icon-only") {
-      // Return SVG icon for icon-only type (note/page icons)
-      if (value === "note") {
-        return html`<ds-icon type="note"></ds-icon>`;
-      } else if (value === "page") {
-        return html`<ds-icon type="page"></ds-icon>`;
-      }
-      return html`<span>${value}</span>`;
     }
 
     return value;
@@ -550,21 +420,6 @@ export class Cycle extends LitElement {
     return colorVar.replace("--", "").replace("-", " ");
   }
 
-  getNotesStyleIcon(style: string) {
-    if (style === "page") {
-      return html`<ds-icon type="page"></ds-icon>`;
-    } else if (style === "note") {
-      return html`<ds-icon type="note"></ds-icon>`;
-    } else if (style === "default") {
-      return html`<ds-icon type="default"></ds-icon>`;
-    } else if (style === "big") {
-      return html`<ds-icon type="big"></ds-icon>`;
-    } else if (style === "gallery") {
-      return html`<ds-icon type="gallery"></ds-icon>`;
-    }
-    return html`<span>${style}</span>`;
-  }
-
   /**
    * A cycle without a stated look takes the one its type has always had: the
    * language and theme cycles are grey chips, every other one, the accent
@@ -594,7 +449,6 @@ export class Cycle extends LitElement {
     if (this.type === "language") return nativeLanguageName(value);
     if (this.type === "theme") return translate(value === "light" ? "Light" : value === "dark" ? "Dark" : "System");
     if (this.type === "accent-color") return translate(this.getColorKey(value));
-    if (this.type === "page-style" || this.type === "icon-only") return translate(value === "note" ? "Note" : "Page");
     return value;
   }
 
@@ -637,12 +491,7 @@ export class Cycle extends LitElement {
           ?disabled=${this.disabled || this._fieldsetDisabled}
           @click=${this.handleButtonClick}
         >
-          ${this.type === "notes-style-medium" || this.type === "icon-only"
-            ? html`<span
-                style="display: inline-flex; align-items: center; gap: var(--025)"
-                >${this.getValueDisplay(this.currentValue)}</span
-              >`
-            : this.type === "language"
+          ${this.type === "language"
               ? html`<ds-text
                   literal text=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>`
@@ -654,11 +503,7 @@ export class Cycle extends LitElement {
                   ? html`<ds-text
                       text=${this.getColorKey(this.currentValue)}
                     ></ds-text>`
-                  : this.type === "page-style"
-                    ? html`<ds-text
-                        text=${this.currentValue === "note" ? "Note" : "Page"}
-                      ></ds-text>`
-                    : html`<ds-text
+                  : html`<ds-text
                         literal text=${this.getValueDisplay(this.currentValue)}
                       ></ds-text>`}
         </ds-button>
@@ -689,10 +534,6 @@ export class Cycle extends LitElement {
   private handleAccentColorChanged() {
     this.setupInitialValue();
   }
-
-  private handleNoteBehaviorChanged() {
-    this.setupInitialValue();
-  }
 }
 
 define("ds-cycle", Cycle);

package/DS1/2-core/ds-device-bezel.ts

@@ -0,0 +1 @@
+export * from '../5-visual-kit/device-bezel';