@deepfuture/dui-templates 1.0.0

package/content/empty-state.js

@@ -0,0 +1,187 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import "@deepfuture/dui-components/icon";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: var(--space-3);
+    padding: var(--space-10) var(--space-6);
+  }
+
+  .icon-wrapper {
+    --icon-size: 2.5rem;
+    --icon-color: var(--text-3);
+    opacity: 0.5;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .heading {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--text-1);
+    margin: 0;
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-3);
+    margin: 0;
+    max-width: 28rem;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-empty-state>` — A centered placeholder for no-data panels.
+ *
+ * Use inside section panels, tables, or lists when there's nothing to display.
+ * Shows an optional icon, heading, description, and action slot for a primary CTA.
+ *
+ * @slot icon - Custom icon content (overrides the default empty-box icon).
+ * @slot actions - Primary call-to-action button(s).
+ * @csspart container - The outer centered container.
+ * @csspart heading - The heading text.
+ * @csspart description - The description text.
+ */
+let DuiEmptyState = (() => {
+    let _classSuper = LitElement;
+    let _heading_decorators;
+    let _heading_initializers = [];
+    let _heading_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    return class DuiEmptyState extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _heading_decorators = [property()];
+            _description_decorators = [property()];
+            __esDecorate(this, null, _heading_decorators, { kind: "accessor", name: "heading", static: false, private: false, access: { has: obj => "heading" in obj, get: obj => obj.heading, set: (obj, value) => { obj.heading = value; } }, metadata: _metadata }, _heading_initializers, _heading_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-empty-state";
+        static styles = [base, styles];
+        #heading_accessor_storage = __runInitializers(this, _heading_initializers, "");
+        /** Primary heading text (e.g. "No events yet"). */
+        get heading() { return this.#heading_accessor_storage; }
+        set heading(value) { this.#heading_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _heading_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Supporting description text. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        /** Toggle hidden on slot wrapper when slotted content changes. */
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        /** Track whether an icon has been slotted. */
+        #hasIconSlot = (__runInitializers(this, _description_extraInitializers), false);
+        #onIconSlotChange(e) {
+            const slot = e.target;
+            this.#hasIconSlot = slot.assignedElements().length > 0;
+            this.requestUpdate();
+        }
+        render() {
+            // Default icon: an inbox/package box
+            const defaultIcon = html `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 7.5c0-1-2.5-3-5-3s-5 2-5 3"/>
+        <path d="M20 7.5v9l-5 3.5-5-3.5v-9"/>
+        <path d="M10 7.5 15 11l5-3.5"/>
+        <path d="M15 11v7"/>
+        <rect x="2" y="2" width="6" height="6" rx="1"/>
+        <path d="M2 10v10c0 .6.4 1 1 1h4c.6 0 1-.4 1-1V10"/>
+      </svg>`;
+            return html `
+      <div class="container" part="container">
+        <div class="icon-wrapper">
+          <dui-icon>
+            <slot name="icon" @slotchange=${this.#onIconSlotChange}>
+              ${!this.#hasIconSlot ? defaultIcon : nothing}
+            </slot>
+          </dui-icon>
+        </div>
+
+        <div class="text">
+          ${this.heading
+                ? html `<p class="heading" part="heading">${this.heading}</p>`
+                : nothing}
+          ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+        </div>
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+        }
+    };
+})();
+export { DuiEmptyState };
+customElements.define(DuiEmptyState.tagName, DuiEmptyState);

package/content/index.d.ts

@@ -0,0 +1,5 @@
+import { DuiBriefingBlock } from "./briefing-block.js";
+import { DuiEmptyState } from "./empty-state.js";
+import { DuiNumberedInsight } from "./numbered-insight.js";
+export { DuiBriefingBlock, DuiEmptyState, DuiNumberedInsight };
+export declare const contentFamily: (typeof DuiBriefingBlock | typeof DuiEmptyState | typeof DuiNumberedInsight)[];

package/content/index.js

@@ -0,0 +1,5 @@
+import { DuiBriefingBlock } from "./briefing-block.js";
+import { DuiEmptyState } from "./empty-state.js";
+import { DuiNumberedInsight } from "./numbered-insight.js";
+export { DuiBriefingBlock, DuiEmptyState, DuiNumberedInsight };
+export const contentFamily = [DuiBriefingBlock, DuiEmptyState, DuiNumberedInsight];

package/content/numbered-insight.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+/**
+ * `<dui-numbered-insight>` — An ordinal-numbered insight with title, badges, and description.
+ *
+ * Use for ranked findings, prioritized recommendations, or numbered takeaways
+ * in analysis panels. The ordinal number renders in a tinted circle for emphasis.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart ordinal - The numbered circle.
+ * @csspart title - The insight title.
+ * @csspart description - The description text.
+ */
+export declare class DuiNumberedInsight extends LitElement {
+    #private;
+    static tagName: "dui-numbered-insight";
+    static styles: import("lit").CSSResult[];
+    /** Ordinal number (e.g. 1, 2, 3). */
+    accessor ordinal: number;
+    /** Primary insight title. */
+    accessor title: string;
+    /** Category label — renders as a neutral badge. */
+    accessor category: string;
+    /** Severity level — maps to badge variant (critical | high | medium | low). */
+    accessor severity: string;
+    /** Descriptive body text. */
+    accessor description: string;
+    render(): TemplateResult;
+}

package/content/numbered-insight.js

@@ -0,0 +1,242 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import "@deepfuture/dui-components/badge";
+/** Severity → badge variant + appearance mapping. */
+const SEVERITY_MAP = {
+    critical: { variant: "danger", appearance: "filled" },
+    high: { variant: "danger", appearance: "ghost" },
+    medium: { variant: "primary", appearance: "ghost" },
+    low: { variant: "neutral", appearance: "ghost" },
+};
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+    transition: background var(--duration-fast) ease;
+  }
+
+  article:hover {
+    background: var(--surface-2);
+  }
+
+  .ordinal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-7);
+    height: var(--space-7);
+    border-radius: var(--radius-full);
+    background: var(--accent-subtle);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--accent-text);
+    line-height: var(--line-height-none);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .badges {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1_5);
+    flex-shrink: 0;
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-relaxed);
+    color: var(--text-2);
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-numbered-insight>` — An ordinal-numbered insight with title, badges, and description.
+ *
+ * Use for ranked findings, prioritized recommendations, or numbered takeaways
+ * in analysis panels. The ordinal number renders in a tinted circle for emphasis.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart ordinal - The numbered circle.
+ * @csspart title - The insight title.
+ * @csspart description - The description text.
+ */
+let DuiNumberedInsight = (() => {
+    let _classSuper = LitElement;
+    let _ordinal_decorators;
+    let _ordinal_initializers = [];
+    let _ordinal_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _category_decorators;
+    let _category_initializers = [];
+    let _category_extraInitializers = [];
+    let _severity_decorators;
+    let _severity_initializers = [];
+    let _severity_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    return class DuiNumberedInsight extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _ordinal_decorators = [property({ type: Number })];
+            _title_decorators = [property()];
+            _category_decorators = [property()];
+            _severity_decorators = [property()];
+            _description_decorators = [property()];
+            __esDecorate(this, null, _ordinal_decorators, { kind: "accessor", name: "ordinal", static: false, private: false, access: { has: obj => "ordinal" in obj, get: obj => obj.ordinal, set: (obj, value) => { obj.ordinal = value; } }, metadata: _metadata }, _ordinal_initializers, _ordinal_extraInitializers);
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _category_decorators, { kind: "accessor", name: "category", static: false, private: false, access: { has: obj => "category" in obj, get: obj => obj.category, set: (obj, value) => { obj.category = value; } }, metadata: _metadata }, _category_initializers, _category_extraInitializers);
+            __esDecorate(this, null, _severity_decorators, { kind: "accessor", name: "severity", static: false, private: false, access: { has: obj => "severity" in obj, get: obj => obj.severity, set: (obj, value) => { obj.severity = value; } }, metadata: _metadata }, _severity_initializers, _severity_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-numbered-insight";
+        static styles = [base, styles];
+        #ordinal_accessor_storage = __runInitializers(this, _ordinal_initializers, 1);
+        /** Ordinal number (e.g. 1, 2, 3). */
+        get ordinal() { return this.#ordinal_accessor_storage; }
+        set ordinal(value) { this.#ordinal_accessor_storage = value; }
+        #title_accessor_storage = (__runInitializers(this, _ordinal_extraInitializers), __runInitializers(this, _title_initializers, ""));
+        /** Primary insight title. */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #category_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _category_initializers, ""));
+        /** Category label — renders as a neutral badge. */
+        get category() { return this.#category_accessor_storage; }
+        set category(value) { this.#category_accessor_storage = value; }
+        #severity_accessor_storage = (__runInitializers(this, _category_extraInitializers), __runInitializers(this, _severity_initializers, ""));
+        /** Severity level — maps to badge variant (critical | high | medium | low). */
+        get severity() { return this.#severity_accessor_storage; }
+        set severity(value) { this.#severity_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _severity_extraInitializers), __runInitializers(this, _description_initializers, ""));
+        /** Descriptive body text. */
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        /** Toggle hidden on slot wrapper when slotted content changes. */
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            const sev = SEVERITY_MAP[this.severity.toLowerCase()];
+            return html `
+      <article part="article">
+        <span class="ordinal" part="ordinal">${this.ordinal}</span>
+
+        <div class="content">
+          <div class="title-row">
+            <span class="title" part="title">${this.title}</span>
+            <div class="badges">
+              ${this.category
+                ? html `<dui-badge appearance="soft">${this.category}</dui-badge>`
+                : nothing}
+              ${sev
+                ? html `<dui-badge variant=${sev.variant} appearance=${sev.appearance}>${this.severity}</dui-badge>`
+                : nothing}
+            </div>
+          </div>
+
+          ${this.description
+                ? html `<p class="description" part="description">${this.description}</p>`
+                : nothing}
+
+          <div class="actions" hidden>
+            <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+          </div>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _description_extraInitializers);
+        }
+    };
+})();
+export { DuiNumberedInsight };
+customElements.define(DuiNumberedInsight.tagName, DuiNumberedInsight);

package/dashboard/index.d.ts

@@ -0,0 +1,5 @@
+import { DuiSectionPanel } from "./section-panel.js";
+import { DuiPageHeader } from "./page-header.js";
+export { DuiSectionPanel };
+export { DuiPageHeader };
+export declare const dashboardFamily: (typeof DuiSectionPanel | typeof DuiPageHeader)[];

package/dashboard/index.js

@@ -0,0 +1,5 @@
+import { DuiSectionPanel } from "./section-panel.js";
+import { DuiPageHeader } from "./page-header.js";
+export { DuiSectionPanel };
+export { DuiPageHeader };
+export const dashboardFamily = [DuiSectionPanel, DuiPageHeader];

package/dashboard/page-header.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/separator";
+/**
+ * `<dui-page-header>` — Full-width top bar for dashboard pages.
+ *
+ * Renders an optional breadcrumb trail, a title, an optional subtitle,
+ * and trailing action buttons. A separator is rendered at the bottom.
+ *
+ * The `breadcrumbs` prop accepts a comma-separated string. The last segment
+ * is rendered as the current page; preceding segments render as links.
+ *
+ * @slot actions - Trailing action buttons or controls.
+ * @csspart header - The outer `<header>` container.
+ * @csspart breadcrumb - The breadcrumb navigation.
+ * @csspart title - The page title.
+ * @csspart subtitle - The subtitle paragraph.
+ */
+export declare class DuiPageHeader extends LitElement {
+    #private;
+    static tagName: "dui-page-header";
+    static styles: import("lit").CSSResult[];
+    /** Page title displayed prominently. */
+    accessor title: string;
+    /** Supporting text below the title. */
+    accessor subtitle: string;
+    /** Comma-separated breadcrumb trail (e.g. "Home, Settings, Profile"). */
+    accessor breadcrumbs: string;
+    render(): TemplateResult;
+}