@dataverse-kit/surface-kit 0.1.0
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/dist/columns-BlpFO5VD.d.cts +7 -0
- package/dist/columns-BlpFO5VD.d.ts +7 -0
- package/dist/core.cjs +100 -0
- package/dist/core.cjs.map +1 -0
- package/dist/core.d.cts +38 -0
- package/dist/core.d.ts +38 -0
- package/dist/core.mjs +61 -0
- package/dist/core.mjs.map +1 -0
- package/dist/index.cjs +1202 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +445 -0
- package/dist/index.d.ts +445 -0
- package/dist/index.mjs +1122 -0
- package/dist/index.mjs.map +1 -0
- package/dist/responsive.cjs +122 -0
- package/dist/responsive.cjs.map +1 -0
- package/dist/responsive.d.cts +25 -0
- package/dist/responsive.d.ts +25 -0
- package/dist/responsive.mjs +89 -0
- package/dist/responsive.mjs.map +1 -0
- package/package.json +72 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
type ColumnCount = 1 | 2 | 3 | 4;
|
|
2
|
+
/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */
|
|
3
|
+
declare function gridTemplateForColumns(columns: ColumnCount): string;
|
|
4
|
+
/** Clamp a cell column-span to the available column count (min 1). */
|
|
5
|
+
declare function clampSpan(span: number, columns: ColumnCount): number;
|
|
6
|
+
|
|
7
|
+
export { type ColumnCount as C, clampSpan as c, gridTemplateForColumns as g };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
type ColumnCount = 1 | 2 | 3 | 4;
|
|
2
|
+
/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */
|
|
3
|
+
declare function gridTemplateForColumns(columns: ColumnCount): string;
|
|
4
|
+
/** Clamp a cell column-span to the available column count (min 1). */
|
|
5
|
+
declare function clampSpan(span: number, columns: ColumnCount): number;
|
|
6
|
+
|
|
7
|
+
export { type ColumnCount as C, clampSpan as c, gridTemplateForColumns as g };
|
package/dist/core.cjs
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/core/index.ts
|
|
21
|
+
var core_exports = {};
|
|
22
|
+
__export(core_exports, {
|
|
23
|
+
CALLOUT_DEFAULT_WIDTH: () => CALLOUT_DEFAULT_WIDTH,
|
|
24
|
+
DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
|
|
25
|
+
MODAL_AUTOSIZE_MIN_WIDTH: () => MODAL_AUTOSIZE_MIN_WIDTH,
|
|
26
|
+
PANEL_DEFAULT_WIDTH: () => PANEL_DEFAULT_WIDTH,
|
|
27
|
+
calloutFormDefaults: () => calloutFormDefaults,
|
|
28
|
+
calloutWidthPx: () => calloutWidthPx,
|
|
29
|
+
clampSpan: () => clampSpan,
|
|
30
|
+
dialogHeightCss: () => dialogHeightCss,
|
|
31
|
+
dialogWidthCss: () => dialogWidthCss,
|
|
32
|
+
dialogWidthPx: () => dialogWidthPx,
|
|
33
|
+
gridTemplateForColumns: () => gridTemplateForColumns,
|
|
34
|
+
panelCustomWidthPx: () => panelCustomWidthPx,
|
|
35
|
+
panelKindFromWidth: () => panelKindFromWidth
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(core_exports);
|
|
38
|
+
|
|
39
|
+
// src/core/sizePresets.ts
|
|
40
|
+
var DIALOG_SIZE_PX = {
|
|
41
|
+
sm: 600,
|
|
42
|
+
md: 900,
|
|
43
|
+
lg: 1200,
|
|
44
|
+
xl: 1600
|
|
45
|
+
};
|
|
46
|
+
function dialogWidthPx(opts = {}) {
|
|
47
|
+
if (typeof opts.width === "number") return opts.width;
|
|
48
|
+
const size = opts.size ?? "lg";
|
|
49
|
+
if (size === "fullscreen") return DIALOG_SIZE_PX.xl;
|
|
50
|
+
return DIALOG_SIZE_PX[size];
|
|
51
|
+
}
|
|
52
|
+
function dialogWidthCss(opts = {}) {
|
|
53
|
+
if (opts.size === "fullscreen" && opts.width == null) return "95vw";
|
|
54
|
+
return `${dialogWidthPx(opts)}px`;
|
|
55
|
+
}
|
|
56
|
+
function dialogHeightCss(height) {
|
|
57
|
+
return height != null && height <= 100 ? `${height}vh` : "95vh";
|
|
58
|
+
}
|
|
59
|
+
var MODAL_AUTOSIZE_MIN_WIDTH = 1e3;
|
|
60
|
+
var PANEL_DEFAULT_WIDTH = 480;
|
|
61
|
+
function panelKindFromWidth(width) {
|
|
62
|
+
return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? "medium" : "custom";
|
|
63
|
+
}
|
|
64
|
+
function panelCustomWidthPx(width) {
|
|
65
|
+
return width ?? PANEL_DEFAULT_WIDTH;
|
|
66
|
+
}
|
|
67
|
+
var CALLOUT_DEFAULT_WIDTH = 320;
|
|
68
|
+
var calloutFormDefaults = {
|
|
69
|
+
width: CALLOUT_DEFAULT_WIDTH,
|
|
70
|
+
directionalHint: "bottomLeftEdge"
|
|
71
|
+
};
|
|
72
|
+
function calloutWidthPx(width) {
|
|
73
|
+
return width ?? CALLOUT_DEFAULT_WIDTH;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// src/core/columns.ts
|
|
77
|
+
function gridTemplateForColumns(columns) {
|
|
78
|
+
return `repeat(${columns}, 1fr)`;
|
|
79
|
+
}
|
|
80
|
+
function clampSpan(span, columns) {
|
|
81
|
+
if (!Number.isFinite(span)) return 1;
|
|
82
|
+
return Math.max(1, Math.min(Math.round(span), columns));
|
|
83
|
+
}
|
|
84
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
85
|
+
0 && (module.exports = {
|
|
86
|
+
CALLOUT_DEFAULT_WIDTH,
|
|
87
|
+
DIALOG_SIZE_PX,
|
|
88
|
+
MODAL_AUTOSIZE_MIN_WIDTH,
|
|
89
|
+
PANEL_DEFAULT_WIDTH,
|
|
90
|
+
calloutFormDefaults,
|
|
91
|
+
calloutWidthPx,
|
|
92
|
+
clampSpan,
|
|
93
|
+
dialogHeightCss,
|
|
94
|
+
dialogWidthCss,
|
|
95
|
+
dialogWidthPx,
|
|
96
|
+
gridTemplateForColumns,
|
|
97
|
+
panelCustomWidthPx,
|
|
98
|
+
panelKindFromWidth
|
|
99
|
+
});
|
|
100
|
+
//# sourceMappingURL=core.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/core/index.ts","../src/core/sizePresets.ts","../src/core/columns.ts"],"sourcesContent":["export * from './sizePresets';\nexport * from './columns';\n","// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n// dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n// panel: kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n// callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n if (typeof opts.width === 'number') return opts.width;\n const size = opts.size ?? 'lg';\n // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n width: CALLOUT_DEFAULT_WIDTH,\n directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n if (!Number.isFinite(span)) return 1;\n return Math.max(1, Math.min(Math.round(span), columns));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACiBO,IAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,cAAc,OAAoD,CAAC,GAAW;AAC5F,MAAI,OAAO,KAAK,UAAU,SAAU,QAAO,KAAK;AAChD,QAAM,OAAO,KAAK,QAAQ;AAE1B,MAAI,SAAS,aAAc,QAAO,eAAe;AACjD,SAAO,eAAe,IAAI;AAC5B;AAGO,SAAS,eAAe,OAAoD,CAAC,GAAW;AAC7F,MAAI,KAAK,SAAS,gBAAgB,KAAK,SAAS,KAAM,QAAO;AAC7D,SAAO,GAAG,cAAc,IAAI,CAAC;AAC/B;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU,QAAQ,UAAU,MAAM,GAAG,MAAM,OAAO;AAC3D;AAGO,IAAM,2BAA2B;AAKjC,IAAM,sBAAsB;AAG5B,SAAS,mBAAmB,OAA2B;AAC5D,UAAQ,SAAS,uBAAuB,MAAM,WAAW;AAC3D;AAGO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,SAAS;AAClB;AAIO,IAAM,wBAAwB;AAG9B,IAAM,sBAAsB;AAAA,EACjC,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEO,SAAS,eAAe,OAAwB;AACrD,SAAO,SAAS;AAClB;;;ACtEO,SAAS,uBAAuB,SAA8B;AACnE,SAAO,UAAU,OAAO;AAC1B;AAGO,SAAS,UAAU,MAAc,SAA8B;AACpE,MAAI,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AACnC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;","names":[]}
|
package/dist/core.d.cts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export { C as ColumnCount, c as clampSpan, g as gridTemplateForColumns } from './columns-BlpFO5VD.cjs';
|
|
2
|
+
|
|
3
|
+
type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
|
|
4
|
+
declare const DIALOG_SIZE_PX: {
|
|
5
|
+
readonly sm: 600;
|
|
6
|
+
readonly md: 900;
|
|
7
|
+
readonly lg: 1200;
|
|
8
|
+
readonly xl: 1600;
|
|
9
|
+
};
|
|
10
|
+
/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */
|
|
11
|
+
declare function dialogWidthPx(opts?: {
|
|
12
|
+
width?: number;
|
|
13
|
+
size?: DialogSizePreset;
|
|
14
|
+
}): number;
|
|
15
|
+
/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */
|
|
16
|
+
declare function dialogWidthCss(opts?: {
|
|
17
|
+
width?: number;
|
|
18
|
+
size?: DialogSizePreset;
|
|
19
|
+
}): string;
|
|
20
|
+
/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */
|
|
21
|
+
declare function dialogHeightCss(height?: number): string;
|
|
22
|
+
/** Min width for an auto-sized ModalSurface (the Track-and-Ship "min 1000, auto" pattern). */
|
|
23
|
+
declare const MODAL_AUTOSIZE_MIN_WIDTH = 1000;
|
|
24
|
+
type PanelKind = 'medium' | 'custom';
|
|
25
|
+
declare const PANEL_DEFAULT_WIDTH = 480;
|
|
26
|
+
/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */
|
|
27
|
+
declare function panelKindFromWidth(width?: number): PanelKind;
|
|
28
|
+
/** customWidth px for a `custom` panel. */
|
|
29
|
+
declare function panelCustomWidthPx(width?: number): number;
|
|
30
|
+
declare const CALLOUT_DEFAULT_WIDTH = 320;
|
|
31
|
+
/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */
|
|
32
|
+
declare const calloutFormDefaults: {
|
|
33
|
+
readonly width: 320;
|
|
34
|
+
readonly directionalHint: "bottomLeftEdge";
|
|
35
|
+
};
|
|
36
|
+
declare function calloutWidthPx(width?: number): number;
|
|
37
|
+
|
|
38
|
+
export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth };
|
package/dist/core.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export { C as ColumnCount, c as clampSpan, g as gridTemplateForColumns } from './columns-BlpFO5VD.js';
|
|
2
|
+
|
|
3
|
+
type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
|
|
4
|
+
declare const DIALOG_SIZE_PX: {
|
|
5
|
+
readonly sm: 600;
|
|
6
|
+
readonly md: 900;
|
|
7
|
+
readonly lg: 1200;
|
|
8
|
+
readonly xl: 1600;
|
|
9
|
+
};
|
|
10
|
+
/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */
|
|
11
|
+
declare function dialogWidthPx(opts?: {
|
|
12
|
+
width?: number;
|
|
13
|
+
size?: DialogSizePreset;
|
|
14
|
+
}): number;
|
|
15
|
+
/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */
|
|
16
|
+
declare function dialogWidthCss(opts?: {
|
|
17
|
+
width?: number;
|
|
18
|
+
size?: DialogSizePreset;
|
|
19
|
+
}): string;
|
|
20
|
+
/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */
|
|
21
|
+
declare function dialogHeightCss(height?: number): string;
|
|
22
|
+
/** Min width for an auto-sized ModalSurface (the Track-and-Ship "min 1000, auto" pattern). */
|
|
23
|
+
declare const MODAL_AUTOSIZE_MIN_WIDTH = 1000;
|
|
24
|
+
type PanelKind = 'medium' | 'custom';
|
|
25
|
+
declare const PANEL_DEFAULT_WIDTH = 480;
|
|
26
|
+
/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */
|
|
27
|
+
declare function panelKindFromWidth(width?: number): PanelKind;
|
|
28
|
+
/** customWidth px for a `custom` panel. */
|
|
29
|
+
declare function panelCustomWidthPx(width?: number): number;
|
|
30
|
+
declare const CALLOUT_DEFAULT_WIDTH = 320;
|
|
31
|
+
/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */
|
|
32
|
+
declare const calloutFormDefaults: {
|
|
33
|
+
readonly width: 320;
|
|
34
|
+
readonly directionalHint: "bottomLeftEdge";
|
|
35
|
+
};
|
|
36
|
+
declare function calloutWidthPx(width?: number): number;
|
|
37
|
+
|
|
38
|
+
export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth };
|
package/dist/core.mjs
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// src/core/sizePresets.ts
|
|
2
|
+
var DIALOG_SIZE_PX = {
|
|
3
|
+
sm: 600,
|
|
4
|
+
md: 900,
|
|
5
|
+
lg: 1200,
|
|
6
|
+
xl: 1600
|
|
7
|
+
};
|
|
8
|
+
function dialogWidthPx(opts = {}) {
|
|
9
|
+
if (typeof opts.width === "number") return opts.width;
|
|
10
|
+
const size = opts.size ?? "lg";
|
|
11
|
+
if (size === "fullscreen") return DIALOG_SIZE_PX.xl;
|
|
12
|
+
return DIALOG_SIZE_PX[size];
|
|
13
|
+
}
|
|
14
|
+
function dialogWidthCss(opts = {}) {
|
|
15
|
+
if (opts.size === "fullscreen" && opts.width == null) return "95vw";
|
|
16
|
+
return `${dialogWidthPx(opts)}px`;
|
|
17
|
+
}
|
|
18
|
+
function dialogHeightCss(height) {
|
|
19
|
+
return height != null && height <= 100 ? `${height}vh` : "95vh";
|
|
20
|
+
}
|
|
21
|
+
var MODAL_AUTOSIZE_MIN_WIDTH = 1e3;
|
|
22
|
+
var PANEL_DEFAULT_WIDTH = 480;
|
|
23
|
+
function panelKindFromWidth(width) {
|
|
24
|
+
return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? "medium" : "custom";
|
|
25
|
+
}
|
|
26
|
+
function panelCustomWidthPx(width) {
|
|
27
|
+
return width ?? PANEL_DEFAULT_WIDTH;
|
|
28
|
+
}
|
|
29
|
+
var CALLOUT_DEFAULT_WIDTH = 320;
|
|
30
|
+
var calloutFormDefaults = {
|
|
31
|
+
width: CALLOUT_DEFAULT_WIDTH,
|
|
32
|
+
directionalHint: "bottomLeftEdge"
|
|
33
|
+
};
|
|
34
|
+
function calloutWidthPx(width) {
|
|
35
|
+
return width ?? CALLOUT_DEFAULT_WIDTH;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// src/core/columns.ts
|
|
39
|
+
function gridTemplateForColumns(columns) {
|
|
40
|
+
return `repeat(${columns}, 1fr)`;
|
|
41
|
+
}
|
|
42
|
+
function clampSpan(span, columns) {
|
|
43
|
+
if (!Number.isFinite(span)) return 1;
|
|
44
|
+
return Math.max(1, Math.min(Math.round(span), columns));
|
|
45
|
+
}
|
|
46
|
+
export {
|
|
47
|
+
CALLOUT_DEFAULT_WIDTH,
|
|
48
|
+
DIALOG_SIZE_PX,
|
|
49
|
+
MODAL_AUTOSIZE_MIN_WIDTH,
|
|
50
|
+
PANEL_DEFAULT_WIDTH,
|
|
51
|
+
calloutFormDefaults,
|
|
52
|
+
calloutWidthPx,
|
|
53
|
+
clampSpan,
|
|
54
|
+
dialogHeightCss,
|
|
55
|
+
dialogWidthCss,
|
|
56
|
+
dialogWidthPx,
|
|
57
|
+
gridTemplateForColumns,
|
|
58
|
+
panelCustomWidthPx,
|
|
59
|
+
panelKindFromWidth
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=core.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/core/sizePresets.ts","../src/core/columns.ts"],"sourcesContent":["// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n// dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n// panel: kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n// callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n if (typeof opts.width === 'number') return opts.width;\n const size = opts.size ?? 'lg';\n // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n width: CALLOUT_DEFAULT_WIDTH,\n directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n if (!Number.isFinite(span)) return 1;\n return Math.max(1, Math.min(Math.round(span), columns));\n}\n"],"mappings":";AAiBO,IAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,cAAc,OAAoD,CAAC,GAAW;AAC5F,MAAI,OAAO,KAAK,UAAU,SAAU,QAAO,KAAK;AAChD,QAAM,OAAO,KAAK,QAAQ;AAE1B,MAAI,SAAS,aAAc,QAAO,eAAe;AACjD,SAAO,eAAe,IAAI;AAC5B;AAGO,SAAS,eAAe,OAAoD,CAAC,GAAW;AAC7F,MAAI,KAAK,SAAS,gBAAgB,KAAK,SAAS,KAAM,QAAO;AAC7D,SAAO,GAAG,cAAc,IAAI,CAAC;AAC/B;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU,QAAQ,UAAU,MAAM,GAAG,MAAM,OAAO;AAC3D;AAGO,IAAM,2BAA2B;AAKjC,IAAM,sBAAsB;AAG5B,SAAS,mBAAmB,OAA2B;AAC5D,UAAQ,SAAS,uBAAuB,MAAM,WAAW;AAC3D;AAGO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,SAAS;AAClB;AAIO,IAAM,wBAAwB;AAG9B,IAAM,sBAAsB;AAAA,EACjC,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEO,SAAS,eAAe,OAAwB;AACrD,SAAO,SAAS;AAClB;;;ACtEO,SAAS,uBAAuB,SAA8B;AACnE,SAAO,UAAU,OAAO;AAC1B;AAGO,SAAS,UAAU,MAAc,SAA8B;AACpE,MAAI,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AACnC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;","names":[]}
|