@things-factory/board-ui 10.1.159 → 10.1.161

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/board-ui",
3
- "version": "10.1.159",
3
+ "version": "10.1.161",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "dist-client/index.js",
6
6
  "things-factory": true,
@@ -43,12 +43,12 @@
43
43
  "@operato/shell": "^10.29.2",
44
44
  "@operato/styles": "^10.0.0",
45
45
  "@operato/utils": "^10.0.0",
46
- "@things-factory/ai-assistant": "^10.1.159",
46
+ "@things-factory/ai-assistant": "^10.1.161",
47
47
  "@things-factory/barcode-base": "^10.1.159",
48
- "@things-factory/board-ai": "^10.1.159",
48
+ "@things-factory/board-ai": "^10.1.161",
49
49
  "@things-factory/fav-base": "^10.1.159",
50
50
  "@things-factory/setting-base": "^10.1.159",
51
51
  "@things-factory/utils": "^10.1.20"
52
52
  },
53
- "gitHead": "fc15cdcb18e562ca1e723a1e1bf042f9582cbbfb"
53
+ "gitHead": "d32fe0614ea40572787acd94e307cc18a681ab38"
54
54
  }
@@ -1,33 +0,0 @@
1
- import '@material/web/icon/icon.js';
2
- import { LitElement } from 'lit';
3
- declare const BoardThumb_base: (new (...args: any[]) => LitElement) & typeof LitElement;
4
- /**
5
- * A board card's image cell - the picture itself, plus the draft marker.
6
- *
7
- * ## Why a component
8
- *
9
- * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
10
- * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
11
- * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
12
- * only way to reach it directly. That still works for a plain image and a badge, but this stays a
13
- * component (rather than folding back into an inline renderer) because the border-bottom seam
14
- * against the info area below wants the same shadow-scoped styling.
15
- *
16
- * ## Why info and favorite do *not* live here
17
- *
18
- * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
19
- * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
20
- * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
21
- * actual dashboard, often already dense with its own labels and numbers; icons on top of that
22
- * compete with content the catalog exists to let a person recognize at a glance. Board's info and
23
- * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
24
- * area below the picture, not on it.
25
- */
26
- export declare class BoardThumb extends BoardThumb_base {
27
- static styles: import("lit").CSSResult;
28
- board: any;
29
- badge?: string;
30
- render(): import("lit-html").TemplateResult<1>;
31
- private renderBadge;
32
- }
33
- export {};
@@ -1,119 +0,0 @@
1
- import { __decorate, __metadata } from "tslib";
2
- import '@material/web/icon/icon.js';
3
- import { css, html, LitElement } from 'lit';
4
- import { customElement, property } from 'lit/decorators.js';
5
- import { i18next, localize } from '@operato/i18n';
6
- /**
7
- * A board card's image cell - the picture itself, plus the draft marker.
8
- *
9
- * ## Why a component
10
- *
11
- * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by
12
- * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own
13
- * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=""` is the
14
- * only way to reach it directly. That still works for a plain image and a badge, but this stays a
15
- * component (rather than folding back into an inline renderer) because the border-bottom seam
16
- * against the info area below wants the same shadow-scoped styling.
17
- *
18
- * ## Why info and favorite do *not* live here
19
- *
20
- * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own
21
- * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a
22
- * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the
23
- * actual dashboard, often already dense with its own labels and numbers; icons on top of that
24
- * compete with content the catalog exists to let a person recognize at a glance. Board's info and
25
- * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information
26
- * area below the picture, not on it.
27
- */
28
- let BoardThumb = class BoardThumb extends localize(i18next)(LitElement) {
29
- static { this.styles = css `
30
- :host {
31
- position: relative;
32
- display: block;
33
- width: 100%;
34
- height: 100%;
35
- overflow: hidden;
36
- /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain
37
- * margin) - without this the image bleeds straight into it with no seam. */
38
- border-bottom: 1px solid var(--md-sys-color-outline-variant);
39
- box-sizing: border-box;
40
- }
41
-
42
- img {
43
- display: block;
44
- width: 100%;
45
- height: 100%;
46
- /*
47
- contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,
48
- a small popup - and cover cropped each one differently, so no two cards framed their
49
- picture alike and the grid never settled. contain shows the whole board on the neutral plate
50
- (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every
51
- card reads as "a picture in a frame" and the row lines up.
52
- */
53
- object-fit: contain;
54
- }
55
-
56
- div[empty] {
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- width: 100%;
61
- height: 100%;
62
- color: var(--md-sys-color-outline);
63
- }
64
- div[empty] md-icon {
65
- --md-icon-size: 28px;
66
- }
67
-
68
- /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */
69
- span[draft] {
70
- position: absolute;
71
- top: 6px;
72
- left: 6px;
73
- padding: 1px 7px;
74
- font: var(--label-font, inherit);
75
- font-size: 0.68rem;
76
- line-height: 1.5;
77
- color: var(--md-sys-color-on-secondary-container);
78
- background-color: var(--md-sys-color-secondary-container);
79
- border-radius: 4px;
80
- }
81
- `; }
82
- render() {
83
- const board = this.board;
84
- if (!board) {
85
- return html ``;
86
- }
87
- return html `
88
- ${board.thumbnail
89
- ? html `<img src=${board.thumbnail} alt=${board.name || ''} loading="lazy" />`
90
- : html `
91
- <div empty>
92
- <md-icon>dashboard</md-icon>
93
- </div>
94
- `}
95
- ${this.renderBadge(board)}
96
- `;
97
- }
98
- renderBadge(board) {
99
- const text = this.badge !== undefined
100
- ? this.badge
101
- : board.state === 'released'
102
- ? ''
103
- : i18next.t('label.draft', { defaultValue: 'Draft' });
104
- return text ? html `<span draft>${text}</span>` : '';
105
- }
106
- };
107
- __decorate([
108
- property({ type: Object }),
109
- __metadata("design:type", Object)
110
- ], BoardThumb.prototype, "board", void 0);
111
- __decorate([
112
- property({ type: String }),
113
- __metadata("design:type", String)
114
- ], BoardThumb.prototype, "badge", void 0);
115
- BoardThumb = __decorate([
116
- customElement('board-thumb')
117
- ], BoardThumb);
118
- export { BoardThumb };
119
- //# sourceMappingURL=board-thumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"board-thumb.js","sourceRoot":"","sources":["../../client/board-list/board-thumb.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACpD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,AApDY,CAoDZ;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,IAAI,EAAE,oBAAoB;YAC7E,CAAC,CAAC,IAAI,CAAA;;;;WAIH;QACH,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;KAC1B,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAU;QAC5B,MAAM,IAAI,GACR,IAAI,CAAC,KAAK,KAAK,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,UAAU;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAA;QAE3D,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAA;IACrD,CAAC;;AAhC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAY;AAGX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAe;AA1D/B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n/**\n * A board card's image cell - the picture itself, plus the draft marker.\n *\n * ## Why a component\n *\n * The catalog draws in ox-grist's CARD mode. The grid treats the thumbnail as one column, drawn by\n * that column's `record.renderer` - and a renderer's output lands inside `ox-card-field`'s own\n * shadow root, several shadow boundaries below this page's stylesheet, so inline `style=\"\"` is the\n * only way to reach it directly. That still works for a plain image and a badge, but this stays a\n * component (rather than folding back into an inline renderer) because the border-bottom seam\n * against the info area below wants the same shadow-scoped styling.\n *\n * ## Why info and favorite do *not* live here\n *\n * They did, briefly, overlaid on the image the way figure-ui's figure-thumb.ts overlays its own\n * (2026-09-23). Reverted the same day: a figure's picture is a neutral rendered part, closer to a\n * plan drawing than a screen - text and icons laid over it read fine. A board's picture is the\n * actual dashboard, often already dense with its own labels and numbers; icons on top of that\n * compete with content the catalog exists to let a person recognize at a glance. Board's info and\n * favorite are gutter buttons instead (board-list-page.ts / play-list-page.ts), in the information\n * area below the picture, not on it.\n */\n@customElement('board-thumb')\nexport class BoardThumb extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n overflow: hidden;\n /* The name/gutters area below has no border of its own (record-card.ts's [content] is plain\n * margin) - without this the image bleeds straight into it with no seam. */\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n box-sizing: border-box;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n /*\n contain, not cover. Boards are not one shape - a wide dashboard, a portrait barcode label,\n a small popup - and cover cropped each one differently, so no two cards framed their\n picture alike and the grid never settled. contain shows the whole board on the neutral plate\n (--data-card-thumbnail-background) the way figure-list-page shows a whole figure, so every\n card reads as \"a picture in a frame\" and the row lines up.\n */\n object-fit: contain;\n }\n\n div[empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--md-sys-color-outline);\n }\n div[empty] md-icon {\n --md-icon-size: 28px;\n }\n\n /* Draft marker - only draft ever says anything, same reasoning as figure-thumb.ts's span[draft]. */\n span[draft] {\n position: absolute;\n top: 6px;\n left: 6px;\n padding: 1px 7px;\n font: var(--label-font, inherit);\n font-size: 0.68rem;\n line-height: 1.5;\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n border-radius: 4px;\n }\n `\n\n @property({ type: Object }) board!: any\n /* Overrides the marker text. Unset means \"the draft rule\"; an empty string means no marker at\n * all - a template has no draft/released state, so board-template-list-page.ts passes ''. */\n @property({ type: String }) badge?: string\n\n render() {\n const board = this.board\n if (!board) {\n return html``\n }\n\n return html`\n ${board.thumbnail\n ? html`<img src=${board.thumbnail} alt=${board.name || ''} loading=\"lazy\" />`\n : html`\n <div empty>\n <md-icon>dashboard</md-icon>\n </div>\n `}\n ${this.renderBadge(board)}\n `\n }\n\n private renderBadge(board: any) {\n const text =\n this.badge !== undefined\n ? this.badge\n : board.state === 'released'\n ? ''\n : i18next.t('label.draft', { defaultValue: 'Draft' })\n\n return text ? html`<span draft>${text}</span>` : ''\n }\n}\n"]}
@@ -1,11 +0,0 @@
1
- /**
2
- * The one card look for every board catalog - board list, play list, template list.
3
- *
4
- * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
5
- * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
6
- * exactly the "why does this page look different" complaint this suite keeps hearing, so the
7
- * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
8
- *
9
- * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
10
- */
11
- export declare const BoardCardStyles: import("lit").CSSResult;
@@ -1,56 +0,0 @@
1
- import { css } from 'lit';
2
- import { FabStyles } from '@operato/styles';
3
- /**
4
- * The one card look for every board catalog - board list, play list, template list.
5
- *
6
- * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The
7
- * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is
8
- * exactly the "why does this page look different" complaint this suite keeps hearing, so the
9
- * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).
10
- *
11
- * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.
12
- */
13
- export const BoardCardStyles = css `
14
- /* The page's one primary action: the suite's card-page FAB. */
15
- ${FabStyles}
16
-
17
- :host {
18
- /* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */
19
- position: relative;
20
-
21
- --data-card-min-width: 240px;
22
- --data-card-record-card-border-radius: 6px;
23
- --data-card-record-card-padding: 0;
24
- --data-card-thumbnail-aspect: 16 / 9;
25
- --data-card-thumbnail-padding: 0;
26
- --data-card-thumbnail-radius: 6px 6px 0 0;
27
- /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in
28
- * operato-board's board-accent.css): the light defaults - white card, light plate - become
29
- * black on black there, and a card that does not lift off its page is not a card. */
30
- --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));
31
- --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));
32
- /* The right margin clears the corner where the action icons sit (below). */
33
- --data-card-item-margin: 10px 52px 10px 12px;
34
- --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');
35
- --data-card-item-name-color: var(--md-sys-color-on-surface);
36
- --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
37
- /* The second line under the name is a side note, not a rival to it. */
38
- --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');
39
- --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
40
- /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */
41
- --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);
42
- --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);
43
- /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */
44
- --data-card-gutter-icon-size: 16px;
45
- --data-card-gutter-icon-color: var(--md-sys-color-outline);
46
- /* One or two small icons do not deserve a row of their own under the text: park them in the
47
- * bottom-right corner, level with the meta line, so the information area stays two lines tall. */
48
- --data-card-gutters-position: absolute;
49
- --data-card-gutters-inset: auto 8px 9px auto;
50
- --data-card-gutters-margin: 0;
51
- }
52
-
53
- /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half
54
- * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */
55
- `;
56
- //# sourceMappingURL=board-card-styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"board-card-styles.js","sourceRoot":"","sources":["../../client/styles/board-card-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;IAE9B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { FabStyles } from '@operato/styles'\n\n/**\n * The one card look for every board catalog - board list, play list, template list.\n *\n * Each page hosts an `ox-grist` in CARD mode and sets the card by `--data-card-*` variables. The\n * three pages used to carry the same forty lines apiece (2026-09-23); a drift between them is\n * exactly the \"why does this page look different\" complaint this suite keeps hearing, so the\n * tokens now live once, here, and a page adds only what is its own (a chip strip). The FAB is the suite's (`FabStyles`).\n *\n * Sized and typed after figure-ui's figure-list-page.ts, so board and figure read as one product.\n */\nexport const BoardCardStyles = css`\n /* The page's one primary action: the suite's card-page FAB. */\n ${FabStyles}\n\n :host {\n /* The frame (WorkSurfacePageStyles) lays the page out; this only anchors the FAB. */\n position: relative;\n\n --data-card-min-width: 240px;\n --data-card-record-card-border-radius: 6px;\n --data-card-record-card-padding: 0;\n --data-card-thumbnail-aspect: 16 / 9;\n --data-card-thumbnail-padding: 0;\n --data-card-thumbnail-radius: 6px 6px 0 0;\n /* The card's two surfaces. The theme raises both in dark (--board-card-surface / -plate in\n * operato-board's board-accent.css): the light defaults - white card, light plate - become\n * black on black there, and a card that does not lift off its page is not a card. */\n --data-card-record-card-background-color: var(--board-card-surface, var(--md-sys-color-surface-container-lowest));\n --data-card-thumbnail-background: var(--board-card-plate, var(--md-sys-color-surface-container));\n /* The right margin clears the corner where the action icons sit (below). */\n --data-card-item-margin: 10px 52px 10px 12px;\n --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n --data-card-item-name-color: var(--md-sys-color-on-surface);\n --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n /* The second line under the name is a side note, not a rival to it. */\n --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n /* record-card.ts reads these two with no fallback - unset means no hover feedback at all. */\n --data-card-record-card-border-hover: 1px solid var(--md-sys-color-outline-variant);\n --data-card-record-card-boxshadow-hover: 0 2px 8px rgba(0, 0, 0, 0.16);\n /* Card actions are secondary to the picture and the name: small, in the quiet outline tone. */\n --data-card-gutter-icon-size: 16px;\n --data-card-gutter-icon-color: var(--md-sys-color-outline);\n /* One or two small icons do not deserve a row of their own under the text: park them in the\n * bottom-right corner, level with the meta line, so the information area stays two lines tall. */\n --data-card-gutters-position: absolute;\n --data-card-gutters-inset: auto 8px 9px auto;\n --data-card-gutters-margin: 0;\n }\n\n /* .page-fill is WorkSurfacePageStyles' own class (flex: 1; min-height: 0) - the min-height half\n * is what lets ox-grist's internal scroller, not the page, be the thing that scrolls. */\n`\n"]}