@deepfuture/dui-templates 1.0.0

package/feed/headline-item.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";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0_5);
+    padding: var(--space-1_5) var(--space-2);
+    border-radius: var(--radius-sm);
+    transition: background var(--duration-fast) ease;
+  }
+
+  article:hover {
+    background: var(--surface-1);
+  }
+
+  .title {
+    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(--foreground);
+    text-decoration: none;
+  }
+
+  .meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1_5);
+    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);
+  }
+
+  .separator {
+    color: var(--text-3);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-headline-item>` — A minimal headline row: title, source, and timestamp.
+ *
+ * Designed for dense headline lists and news tickers where space is at a premium.
+ * Renders as a single horizontal row with the title taking available space and
+ * source + timestamp right-aligned.
+ *
+ * @slot actions - Optional trailing action buttons or links.
+ * @csspart article - The outer article container.
+ * @csspart title - The headline title text.
+ * @csspart meta - The source + timestamp row.
+ */
+let DuiHeadlineItem = (() => {
+    let _classSuper = LitElement;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _source_decorators;
+    let _source_initializers = [];
+    let _source_extraInitializers = [];
+    let _timestamp_decorators;
+    let _timestamp_initializers = [];
+    let _timestamp_extraInitializers = [];
+    let _href_decorators;
+    let _href_initializers = [];
+    let _href_extraInitializers = [];
+    return class DuiHeadlineItem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _source_decorators = [property()];
+            _timestamp_decorators = [property()];
+            _href_decorators = [property()];
+            __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, _source_decorators, { kind: "accessor", name: "source", static: false, private: false, access: { has: obj => "source" in obj, get: obj => obj.source, set: (obj, value) => { obj.source = value; } }, metadata: _metadata }, _source_initializers, _source_extraInitializers);
+            __esDecorate(this, null, _timestamp_decorators, { kind: "accessor", name: "timestamp", static: false, private: false, access: { has: obj => "timestamp" in obj, get: obj => obj.timestamp, set: (obj, value) => { obj.timestamp = value; } }, metadata: _metadata }, _timestamp_initializers, _timestamp_extraInitializers);
+            __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-headline-item";
+        static styles = [base, styles];
+        #title_accessor_storage = __runInitializers(this, _title_initializers, "");
+        /** Primary headline text. */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #source_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _source_initializers, ""));
+        /** Source or publication name. */
+        get source() { return this.#source_accessor_storage; }
+        set source(value) { this.#source_accessor_storage = value; }
+        #timestamp_accessor_storage = (__runInitializers(this, _source_extraInitializers), __runInitializers(this, _timestamp_initializers, ""));
+        /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+        get timestamp() { return this.#timestamp_accessor_storage; }
+        set timestamp(value) { this.#timestamp_accessor_storage = value; }
+        #href_accessor_storage = (__runInitializers(this, _timestamp_extraInitializers), __runInitializers(this, _href_initializers, ""));
+        /** Optional URL — when set, the title renders as a link. */
+        get href() { return this.#href_accessor_storage; }
+        set href(value) { this.#href_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 titleContent = this.href
+                ? html `<a href=${this.href} class="title" part="title">${this.title}</a>`
+                : html `<span class="title" part="title">${this.title}</span>`;
+            return html `
+      <article part="article">
+        ${titleContent}
+
+        ${this.source || this.timestamp
+                ? html `
+            <div class="meta" part="meta">
+              ${this.source ? html `<span>${this.source}</span>` : nothing}
+              ${this.source && this.timestamp
+                    ? html `<span class="separator">·</span>`
+                    : nothing}
+              ${this.timestamp
+                    ? html `<time>${this.timestamp}</time>`
+                    : nothing}
+            </div>`
+                : nothing}
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _href_extraInitializers);
+        }
+    };
+})();
+export { DuiHeadlineItem };
+customElements.define(DuiHeadlineItem.tagName, DuiHeadlineItem);

package/feed/index.d.ts

@@ -0,0 +1,6 @@
+import { DuiFeedItem } from "./feed-item.js";
+import { DuiActivityItem } from "./activity-item.js";
+import { DuiSocialPost } from "./social-post.js";
+import { DuiHeadlineItem } from "./headline-item.js";
+export { DuiFeedItem, DuiActivityItem, DuiSocialPost, DuiHeadlineItem };
+export declare const feedFamily: (typeof DuiFeedItem | typeof DuiActivityItem | typeof DuiSocialPost | typeof DuiHeadlineItem)[];

package/feed/index.js

@@ -0,0 +1,6 @@
+import { DuiFeedItem } from "./feed-item.js";
+import { DuiActivityItem } from "./activity-item.js";
+import { DuiSocialPost } from "./social-post.js";
+import { DuiHeadlineItem } from "./headline-item.js";
+export { DuiFeedItem, DuiActivityItem, DuiSocialPost, DuiHeadlineItem };
+export const feedFamily = [DuiFeedItem, DuiActivityItem, DuiSocialPost, DuiHeadlineItem];

package/feed/social-post.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/avatar";
+import "@deepfuture/dui-components/badge";
+/**
+ * `<dui-social-post>` — A social signal card for monitoring dashboards.
+ *
+ * Displays an author, handle, timestamp, body text, and optional source
+ * badge and avatar. Useful for social media monitoring feeds.
+ *
+ * @slot avatar - Profile picture (dui-avatar recommended).
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer article container.
+ * @csspart header - The author/handle/timestamp + source badge row.
+ * @csspart body - The post body text.
+ */
+export declare class DuiSocialPost extends LitElement {
+    #private;
+    static tagName: "dui-social-post";
+    static styles: import("lit").CSSResult[];
+    /** Display name of the post author. */
+    accessor author: string;
+    /** Handle / username (e.g. "@analyst_jane"). */
+    accessor handle: string;
+    /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+    accessor timestamp: string;
+    /** Post body text. */
+    accessor body: string;
+    /** Source platform label (e.g. "X", "Bluesky", "Telegram"). */
+    accessor source: string;
+    render(): TemplateResult;
+}

package/feed/social-post.js

@@ -0,0 +1,268 @@
+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/avatar";
+import "@deepfuture/dui-components/badge";
+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);
+  }
+
+  /* ── Avatar ── */
+  .avatar-slot {
+    flex-shrink: 0;
+  }
+
+  .avatar-slot[hidden] {
+    display: none;
+  }
+
+  /* ── Main content ── */
+  .main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+    flex: 1;
+  }
+
+  /* ── Header row ── */
+  header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1_5);
+    min-width: 0;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-1_5);
+    min-width: 0;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  .author {
+    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);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  .handle {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--text-3);
+    white-space: nowrap;
+  }
+
+  .separator {
+    color: var(--text-3);
+    font-size: var(--text-xs);
+  }
+
+  .timestamp {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--text-3);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* ── Body ── */
+  .body {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-1);
+    margin-bottom: var(--space-1);
+    white-space: pre-line;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-social-post>` — A social signal card for monitoring dashboards.
+ *
+ * Displays an author, handle, timestamp, body text, and optional source
+ * badge and avatar. Useful for social media monitoring feeds.
+ *
+ * @slot avatar - Profile picture (dui-avatar recommended).
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer article container.
+ * @csspart header - The author/handle/timestamp + source badge row.
+ * @csspart body - The post body text.
+ */
+let DuiSocialPost = (() => {
+    let _classSuper = LitElement;
+    let _author_decorators;
+    let _author_initializers = [];
+    let _author_extraInitializers = [];
+    let _handle_decorators;
+    let _handle_initializers = [];
+    let _handle_extraInitializers = [];
+    let _timestamp_decorators;
+    let _timestamp_initializers = [];
+    let _timestamp_extraInitializers = [];
+    let _body_decorators;
+    let _body_initializers = [];
+    let _body_extraInitializers = [];
+    let _source_decorators;
+    let _source_initializers = [];
+    let _source_extraInitializers = [];
+    return class DuiSocialPost extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _author_decorators = [property()];
+            _handle_decorators = [property()];
+            _timestamp_decorators = [property()];
+            _body_decorators = [property()];
+            _source_decorators = [property()];
+            __esDecorate(this, null, _author_decorators, { kind: "accessor", name: "author", static: false, private: false, access: { has: obj => "author" in obj, get: obj => obj.author, set: (obj, value) => { obj.author = value; } }, metadata: _metadata }, _author_initializers, _author_extraInitializers);
+            __esDecorate(this, null, _handle_decorators, { kind: "accessor", name: "handle", static: false, private: false, access: { has: obj => "handle" in obj, get: obj => obj.handle, set: (obj, value) => { obj.handle = value; } }, metadata: _metadata }, _handle_initializers, _handle_extraInitializers);
+            __esDecorate(this, null, _timestamp_decorators, { kind: "accessor", name: "timestamp", static: false, private: false, access: { has: obj => "timestamp" in obj, get: obj => obj.timestamp, set: (obj, value) => { obj.timestamp = value; } }, metadata: _metadata }, _timestamp_initializers, _timestamp_extraInitializers);
+            __esDecorate(this, null, _body_decorators, { kind: "accessor", name: "body", static: false, private: false, access: { has: obj => "body" in obj, get: obj => obj.body, set: (obj, value) => { obj.body = value; } }, metadata: _metadata }, _body_initializers, _body_extraInitializers);
+            __esDecorate(this, null, _source_decorators, { kind: "accessor", name: "source", static: false, private: false, access: { has: obj => "source" in obj, get: obj => obj.source, set: (obj, value) => { obj.source = value; } }, metadata: _metadata }, _source_initializers, _source_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-social-post";
+        static styles = [base, styles];
+        #author_accessor_storage = __runInitializers(this, _author_initializers, "");
+        /** Display name of the post author. */
+        get author() { return this.#author_accessor_storage; }
+        set author(value) { this.#author_accessor_storage = value; }
+        #handle_accessor_storage = (__runInitializers(this, _author_extraInitializers), __runInitializers(this, _handle_initializers, ""));
+        /** Handle / username (e.g. "@analyst_jane"). */
+        get handle() { return this.#handle_accessor_storage; }
+        set handle(value) { this.#handle_accessor_storage = value; }
+        #timestamp_accessor_storage = (__runInitializers(this, _handle_extraInitializers), __runInitializers(this, _timestamp_initializers, ""));
+        /** Display timestamp (e.g. "2 min ago", "14:23 UTC"). */
+        get timestamp() { return this.#timestamp_accessor_storage; }
+        set timestamp(value) { this.#timestamp_accessor_storage = value; }
+        #body_accessor_storage = (__runInitializers(this, _timestamp_extraInitializers), __runInitializers(this, _body_initializers, ""));
+        /** Post body text. */
+        get body() { return this.#body_accessor_storage; }
+        set body(value) { this.#body_accessor_storage = value; }
+        #source_accessor_storage = (__runInitializers(this, _body_extraInitializers), __runInitializers(this, _source_initializers, ""));
+        /** Source platform label (e.g. "X", "Bluesky", "Telegram"). */
+        get source() { return this.#source_accessor_storage; }
+        set source(value) { this.#source_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            return html `
+      <article part="article">
+        <div class="avatar-slot" hidden>
+          <slot name="avatar" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+
+        <div class="main">
+          <header part="header">
+            <div class="header-left">
+              ${this.author
+                ? html `<span class="author">${this.author}</span>`
+                : nothing}
+              ${this.handle
+                ? html `<span class="handle">${this.handle}</span>`
+                : nothing}
+              ${(this.author || this.handle) && this.timestamp
+                ? html `<span class="separator">·</span>`
+                : nothing}
+              ${this.timestamp
+                ? html `<time class="timestamp" part="timestamp">${this.timestamp}</time>`
+                : nothing}
+            </div>
+            ${this.source
+                ? html `<dui-badge variant="neutral" appearance="soft">${this.source}</dui-badge>`
+                : nothing}
+          </header>
+
+          ${this.body
+                ? html `<p class="body" part="body">${this.body}</p>`
+                : nothing}
+
+          <div class="actions" hidden>
+            <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+          </div>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _source_extraInitializers);
+        }
+    };
+})();
+export { DuiSocialPost };
+customElements.define(DuiSocialPost.tagName, DuiSocialPost);

package/media/avatar-row.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/avatar";
+import "@deepfuture/dui-components/scroll-area";
+/** A single avatar entry in the row. */
+export interface AvatarItem {
+    /** Image URL for the avatar. */
+    src?: string;
+    /** Display name — used for alt text and fallback initials. */
+    name: string;
+    /** Optional label beneath the avatar (defaults to name). */
+    label?: string;
+}
+/**
+ * `<dui-avatar-row>` — A horizontal scrollable row of circular avatars with labels.
+ *
+ * Ideal for displaying teams, participants, agents, or any list of people/entities
+ * in a compact horizontal strip. Scrolls horizontally when items overflow.
+ *
+ * @slot actions - Optional trailing action (e.g. an "Add" button).
+ * @csspart row - The flex container holding avatar items.
+ */
+export declare class DuiAvatarRow extends LitElement {
+    #private;
+    static tagName: "dui-avatar-row";
+    static styles: import("lit").CSSResult[];
+    /** Array of avatar items to display. */
+    accessor data: AvatarItem[];
+    /** Text shown when data is empty. */
+    accessor emptyText: string;
+    render(): TemplateResult;
+}