@trebired/frontend 1.2.1 → 1.3.0

package/dist/src/sidebar/live.js

@@ -0,0 +1,61 @@
+import { queryAll } from "../../dom/index.js";
+const SIDEBAR_LIVE_ROOT_SELECTOR = "[data-tbf-sidebar-live]";
+const SIDEBAR_LIVE_SLOT_SELECTOR = "[data-tbf-sidebar-live-slot]";
+const SIDEBAR_LIVE_EVENT = "tbf:sidebar-live";
+function normalizeLivePayload(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return {};
+    const payload = value;
+    return payload.slots && typeof payload.slots === "object" ? payload : {};
+}
+function applySidebarLiveSlot(slot, value) {
+    if (!value)
+        return;
+    if (value.text !== undefined)
+        slot.textContent = String(value.text);
+    if (value.state !== undefined)
+        slot.setAttribute("data-tbf-sidebar-live-state", String(value.state));
+    if (value.hidden !== undefined)
+        slot.hidden = Boolean(value.hidden);
+}
+function applySidebarLivePayload(root, payload) {
+    const slots = payload.slots || {};
+    queryAll(root, SIDEBAR_LIVE_SLOT_SELECTOR).forEach((slot) => {
+        const key = slot.getAttribute("data-tbf-sidebar-live-slot") || "";
+        applySidebarLiveSlot(slot, slots[key]);
+    });
+}
+async function refreshSidebarLive(root) {
+    const url = root.getAttribute("data-tbf-sidebar-live-url");
+    if (!url || typeof fetch !== "function")
+        return null;
+    const response = await fetch(url, { credentials: "same-origin", headers: { Accept: "application/json" } });
+    const payload = normalizeLivePayload(await response.json().catch(() => null));
+    applySidebarLivePayload(root, payload);
+    return payload;
+}
+function bindSidebarLiveRoot(root) {
+    if (!(root instanceof HTMLElement) || root.hasAttribute("data-tbf-sidebar-live-bound"))
+        return null;
+    root.setAttribute("data-tbf-sidebar-live-bound", "true");
+    if (root.hasAttribute("data-tbf-sidebar-live-url"))
+        void refreshSidebarLive(root);
+    const interval = Number(root.getAttribute("data-tbf-sidebar-live-interval") || 0);
+    if (interval > 0)
+        window.setInterval(() => void refreshSidebarLive(root), interval);
+    return root;
+}
+function handleSidebarLiveEvent(event) {
+    const custom = event;
+    applySidebarLivePayload(document, normalizeLivePayload(custom.detail));
+}
+let sidebarLiveListenerInstalled = false;
+function bindSidebarLiveSlots(root = document) {
+    queryAll(root, SIDEBAR_LIVE_ROOT_SELECTOR).forEach(bindSidebarLiveRoot);
+    if (!sidebarLiveListenerInstalled && typeof document !== "undefined") {
+        sidebarLiveListenerInstalled = true;
+        document.addEventListener(SIDEBAR_LIVE_EVENT, handleSidebarLiveEvent);
+    }
+}
+export { SIDEBAR_LIVE_EVENT, SIDEBAR_LIVE_ROOT_SELECTOR, SIDEBAR_LIVE_SLOT_SELECTOR, applySidebarLivePayload, applySidebarLiveSlot, bindSidebarLiveRoot, bindSidebarLiveSlots, refreshSidebarLive, };
+//# sourceMappingURL=live.js.map

package/dist/src/sidebar/live.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live.js","sourceRoot":"","sources":["../../../src/sidebar/live.ts"],"names":[],"mappings":"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"}

package/dist/src/surface/components/index.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { type SurfaceSize, type SurfaceTone } from "../../../surface/index.d.ts";
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: SurfaceSize;
+    tone?: SurfaceTone;
+};
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+    interactive?: boolean;
+    tone?: SurfaceTone;
+};
+type CanvasPanelProps = HTMLAttributes<HTMLDivElement> & {
+    actions?: ReactNode;
+    fullscreenId?: string;
+    subtitle?: ReactNode;
+    title?: ReactNode;
+};
+declare function Button(props: ButtonProps): import("react").JSX.Element;
+declare function Card(props: CardProps): import("react").JSX.Element;
+declare function CardHeader(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CardBody(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CardFooter(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CanvasPanel(props: CanvasPanelProps): import("react").JSX.Element;
+export { Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader };
+export type { ButtonProps, CanvasPanelProps, CardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/surface/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjF,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,+BAOjC;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,+BAY7B;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGtD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAS3C;AAmBD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AACvE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/surface/components/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../../components/index.js";
+import { FullscreenCloseButton, FullscreenOpenButton, FullscreenTarget } from "../../../fullscreen/components/index.js";
+import { surfaceClass } from "../../../surface/index.js";
+function Button(props) {
+    const { children, className, size, tone, type = "button", ...rest } = props;
+    return (_jsx("button", { ...rest, className: classNames(surfaceClass("tbf-button", { size, tone }), className), type: type, children: children }));
+}
+function Card(props) {
+    const { children, className, interactive, tone, ...rest } = props;
+    return (_jsx("div", { ...rest, className: classNames(surfaceClass("tbf-card", { tone }), className), "data-tbf-card": "", "data-tbf-interactive": interactive ? "true" : undefined, children: children }));
+}
+function CardHeader(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__header", className), children: children });
+}
+function CardBody(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__body", className), children: children });
+}
+function CardFooter(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__footer", className), children: children });
+}
+function CanvasPanel(props) {
+    const { actions, children, className, fullscreenId, subtitle, title, ...rest } = props;
+    const body = (_jsxs("div", { ...rest, className: classNames("tbf-canvas-panel", className), "data-tbf-canvas-panel": "", children: [_jsx(CanvasPanelHeader, { actions: actions, fullscreenId: fullscreenId, subtitle: subtitle, title: title }), _jsx("div", { className: "tbf-canvas-panel__body", children: children })] }));
+    return fullscreenId ? _jsx(FullscreenTarget, { fullscreenId: fullscreenId, children: body }) : body;
+}
+function CanvasPanelHeader(props) {
+    if (!props.title && !props.subtitle && !props.actions && !props.fullscreenId)
+        return null;
+    return (_jsxs("div", { className: "tbf-canvas-panel__header", children: [_jsxs("div", { className: "tbf-canvas-panel__titles", children: [props.title ? _jsx("strong", { children: props.title }) : null, props.subtitle ? _jsx("span", { children: props.subtitle }) : null] }), _jsxs("div", { className: "tbf-canvas-panel__actions", children: [props.actions, props.fullscreenId ? _jsx(FullscreenOpenButton, { fullscreenId: props.fullscreenId, children: "Open" }) : null, props.fullscreenId ? _jsx(FullscreenCloseButton, { fullscreenId: props.fullscreenId, children: "Close" }) : null] })] }));
+}
+export { Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader };
+//# sourceMappingURL=index.js.map

package/dist/src/surface/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/surface/index.d.ts

@@ -0,0 +1,9 @@
+type SurfaceTone = "default" | "muted" | "strong" | string;
+type SurfaceSize = "sm" | "md" | "lg" | string;
+declare function surfaceClass(base: string, options?: {
+    size?: SurfaceSize;
+    tone?: SurfaceTone;
+}): string;
+export { surfaceClass };
+export type { SurfaceSize, SurfaceTone };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/surface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/surface/index.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/C,iBAAS,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,IAAI,CAAC,EAAE,WAAW,CAAA;CAAO,UAM3F;AAED,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/surface/index.js

@@ -0,0 +1,9 @@
+function surfaceClass(base, options = {}) {
+    return [
+        base,
+        options.size ? `${base}--${options.size}` : "",
+        options.tone ? `${base}--${options.tone}` : "",
+    ].filter(Boolean).join(" ");
+}
+export { surfaceClass };
+//# sourceMappingURL=index.js.map

package/dist/src/surface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/surface/index.ts"],"names":[],"mappings":"AAIA,SAAS,YAAY,CAAC,IAAY,EAAE,UAAsD,EAAE;IAC1F,OAAO;QACL,IAAI;QACJ,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;KAC/C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/surface/components/index.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { type SurfaceSize, type SurfaceTone } from "../index.d.ts";
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: SurfaceSize;
+    tone?: SurfaceTone;
+};
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+    interactive?: boolean;
+    tone?: SurfaceTone;
+};
+type CanvasPanelProps = HTMLAttributes<HTMLDivElement> & {
+    actions?: ReactNode;
+    fullscreenId?: string;
+    subtitle?: ReactNode;
+    title?: ReactNode;
+};
+declare function Button(props: ButtonProps): import("react").JSX.Element;
+declare function Card(props: CardProps): import("react").JSX.Element;
+declare function CardHeader(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CardBody(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CardFooter(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CanvasPanel(props: CanvasPanelProps): import("react").JSX.Element;
+export { Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader };
+export type { ButtonProps, CanvasPanelProps, CardProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/surface/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjF,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,+BAOjC;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,+BAY7B;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGtD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGxD;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAS3C;AAmBD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AACvE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC"}

package/dist/surface/components/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../components/index.js";
+import { FullscreenCloseButton, FullscreenOpenButton, FullscreenTarget } from "../../fullscreen/components/index.js";
+import { surfaceClass } from "../index.js";
+function Button(props) {
+    const { children, className, size, tone, type = "button", ...rest } = props;
+    return (_jsx("button", { ...rest, className: classNames(surfaceClass("tbf-button", { size, tone }), className), type: type, children: children }));
+}
+function Card(props) {
+    const { children, className, interactive, tone, ...rest } = props;
+    return (_jsx("div", { ...rest, className: classNames(surfaceClass("tbf-card", { tone }), className), "data-tbf-card": "", "data-tbf-interactive": interactive ? "true" : undefined, children: children }));
+}
+function CardHeader(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__header", className), children: children });
+}
+function CardBody(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__body", className), children: children });
+}
+function CardFooter(props) {
+    const { children, className, ...rest } = props;
+    return _jsx("div", { ...rest, className: classNames("tbf-card__footer", className), children: children });
+}
+function CanvasPanel(props) {
+    const { actions, children, className, fullscreenId, subtitle, title, ...rest } = props;
+    const body = (_jsxs("div", { ...rest, className: classNames("tbf-canvas-panel", className), "data-tbf-canvas-panel": "", children: [_jsx(CanvasPanelHeader, { actions: actions, fullscreenId: fullscreenId, subtitle: subtitle, title: title }), _jsx("div", { className: "tbf-canvas-panel__body", children: children })] }));
+    return fullscreenId ? _jsx(FullscreenTarget, { fullscreenId: fullscreenId, children: body }) : body;
+}
+function CanvasPanelHeader(props) {
+    if (!props.title && !props.subtitle && !props.actions && !props.fullscreenId)
+        return null;
+    return (_jsxs("div", { className: "tbf-canvas-panel__header", children: [_jsxs("div", { className: "tbf-canvas-panel__titles", children: [props.title ? _jsx("strong", { children: props.title }) : null, props.subtitle ? _jsx("span", { children: props.subtitle }) : null] }), _jsxs("div", { className: "tbf-canvas-panel__actions", children: [props.actions, props.fullscreenId ? _jsx(FullscreenOpenButton, { fullscreenId: props.fullscreenId, children: "Open" }) : null, props.fullscreenId ? _jsx(FullscreenCloseButton, { fullscreenId: props.fullscreenId, children: "Close" }) : null] })] }));
+}
+export { Button, CanvasPanel, Card, CardBody, CardFooter, CardHeader };
+//# sourceMappingURL=index.js.map

package/dist/surface/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/surface/components/index.tsx"],"names":[],"mappings":"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"}

package/dist/surface/index.d.ts

@@ -0,0 +1,9 @@
+type SurfaceTone = "default" | "muted" | "strong" | string;
+type SurfaceSize = "sm" | "md" | "lg" | string;
+declare function surfaceClass(base: string, options?: {
+    size?: SurfaceSize;
+    tone?: SurfaceTone;
+}): string;
+export { surfaceClass };
+export type { SurfaceSize, SurfaceTone };
+//# sourceMappingURL=index.d.ts.map

package/dist/surface/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/surface/index.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/C,iBAAS,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,IAAI,CAAC,EAAE,WAAW,CAAA;CAAO,UAM3F;AAED,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/surface/index.js

@@ -0,0 +1,9 @@
+function surfaceClass(base, options = {}) {
+    return [
+        base,
+        options.size ? `${base}--${options.size}` : "",
+        options.tone ? `${base}--${options.tone}` : "",
+    ].filter(Boolean).join(" ");
+}
+export { surfaceClass };
+//# sourceMappingURL=index.js.map

package/dist/surface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/surface/index.ts"],"names":[],"mappings":"AAIA,SAAS,YAAY,CAAC,IAAY,EAAE,UAAsD,EAAE;IAC1F,OAAO;QACL,IAAI;QACJ,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;KAC/C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/surface/styles/index.scss

@@ -0,0 +1,110 @@
+.tbf-button {
+  min-height: 32px;
+  box-sizing: border-box;
+  padding: 0 12px;
+  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+  border-radius: var(--tbf-radius-sm, 0);
+  color: var(--tbf-text, #000);
+  background: var(--tbf-surface-muted, #fff);
+  cursor: pointer;
+}
+
+.tbf-button--strong {
+  border-color: var(--tbf-focus, #000);
+  color: var(--tbf-surface, #fff);
+  background: var(--tbf-focus, #000);
+}
+
+.tbf-button--sm {
+  min-height: 28px;
+  padding-inline: 9px;
+}
+
+.tbf-button--lg {
+  min-height: 40px;
+  padding-inline: 16px;
+}
+
+.tbf-card,
+[data-tbf-card] {
+  min-width: 0;
+  box-sizing: border-box;
+  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+  border-radius: var(--tbf-radius, 0);
+  color: var(--tbf-text, #000);
+  background: var(--tbf-surface, #fff);
+}
+
+.tbf-card[data-tbf-interactive="true"]:hover {
+  border-color: var(--tbf-focus, #000);
+}
+
+.tbf-card__header,
+.tbf-card__body,
+.tbf-card__footer {
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 12px;
+}
+
+.tbf-card__header,
+.tbf-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--tbf-gap-sm, 8px);
+}
+
+.tbf-card__header {
+  border-block-end: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+}
+
+.tbf-card__footer {
+  border-block-start: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+}
+
+.tbf-canvas-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+  border-radius: var(--tbf-radius, 0);
+  background: var(--tbf-surface, #fff);
+}
+
+.tbf-canvas-panel__header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--tbf-gap-sm, 8px);
+  padding: 10px 12px;
+  border-block-end: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
+}
+
+.tbf-canvas-panel__titles {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tbf-canvas-panel__titles span {
+  color: var(--tbf-text-muted, #666);
+  font-size: 0.9rem;
+}
+
+.tbf-canvas-panel__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.tbf-canvas-panel__body {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: 12px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebired/frontend",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,