@promptframe/component-kit 0.1.5 → 0.1.6

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.
Files changed (12) hide show
  1. package/README.md +13 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +1 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/standard.d.ts +2 -2
  7. package/dist/standard.js +1 -1
  8. package/dist/style.d.ts +38 -0
  9. package/dist/style.d.ts.map +1 -0
  10. package/dist/style.js +121 -0
  11. package/dist/style.js.map +1 -0
  12. package/package.json +6 -2
package/README.md CHANGED
@@ -11,6 +11,7 @@ npm install @promptframe/component-kit
11
11
  - Standard version stamps for component metadata, sourced from `@promptframe/contracts`.
12
12
  - Preview constraints used by PromptFrame component tooling.
13
13
  - Timing helpers for deterministic Remotion animations.
14
+ - Public style helpers backed by `@promptframe/contracts`.
14
15
 
15
16
  ## Usage
16
17
 
@@ -38,12 +39,24 @@ const timeline = createDurationTimeline({
38
39
  });
39
40
  ```
40
41
 
42
+ ```ts
43
+ import { resolvePromptFrameStyle } from '@promptframe/component-kit/style';
44
+
45
+ const style = resolvePromptFrameStyle({ tone: 'tech', accentColor: '#38bdf8' }, {
46
+ width: 1920,
47
+ height: 1080,
48
+ fps: 30,
49
+ durationInFrames: 180,
50
+ });
51
+ ```
52
+
41
53
  ## Entrypoints
42
54
 
43
55
  ```ts
44
56
  import { getComponentStandardStamp } from '@promptframe/component-kit';
45
57
  import { COMPONENT_PREVIEW_CONSTRAINTS } from '@promptframe/component-kit/preview';
46
58
  import { createDurationTimeline } from '@promptframe/component-kit/timing';
59
+ import { resolvePromptFrameStyle } from '@promptframe/component-kit/style';
47
60
  ```
48
61
 
49
62
  ## Peer Dependencies
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './preview.js';
2
2
  export * from './standard.js';
3
+ export * from './style.js';
3
4
  export * from './timing.js';
4
5
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './preview.js';
2
2
  export * from './standard.js';
3
+ export * from './style.js';
3
4
  export * from './timing.js';
4
5
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}
package/dist/standard.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  export declare const COMPONENT_STANDARD_VERSION: "component-standard.v0.1.0";
2
2
  export declare const COMPONENT_STANDARD_SOURCE_HASH: "sha256:8c1e01c36155b4b646981064d24df9bd8cda501fd9cd9da93e5b62f40db22d52";
3
3
  export declare const COMPONENT_STANDARD_SOURCE_PATH: "https://github.com/ty-teams/promptframe-component-authoring#readme";
4
- export declare const COMPONENT_KIT_VERSION: "0.1.5";
4
+ export declare const COMPONENT_KIT_VERSION: "0.1.6";
5
5
  export declare const COMPONENT_MANIFEST_SCHEMA_VERSION: "component-manifest.v0.1.0";
6
6
  export declare const COMPONENT_REVIEW_CHECKLIST_VERSION: "component-review-checklist.v0.1.0";
7
7
  export declare function getComponentStandardStamp(): {
8
8
  sourceVersion: "component-standard.v0.1.0";
9
9
  sourceHash: "sha256:8c1e01c36155b4b646981064d24df9bd8cda501fd9cd9da93e5b62f40db22d52";
10
10
  sourcePath: "https://github.com/ty-teams/promptframe-component-authoring#readme";
11
- componentKitVersion: "0.1.5";
11
+ componentKitVersion: "0.1.6";
12
12
  manifestSchemaVersion: "component-manifest.v0.1.0";
13
13
  reviewChecklistVersion: "component-review-checklist.v0.1.0";
14
14
  };
package/dist/standard.js CHANGED
@@ -2,7 +2,7 @@ import { COMPONENT_MANIFEST_SCHEMA_VERSION as CONTRACTS_COMPONENT_MANIFEST_SCHEM
2
2
  export const COMPONENT_STANDARD_VERSION = CONTRACTS_COMPONENT_STANDARD_VERSION;
3
3
  export const COMPONENT_STANDARD_SOURCE_HASH = CONTRACTS_COMPONENT_STANDARD_SOURCE_HASH;
4
4
  export const COMPONENT_STANDARD_SOURCE_PATH = 'https://github.com/ty-teams/promptframe-component-authoring#readme';
5
- export const COMPONENT_KIT_VERSION = '0.1.5';
5
+ export const COMPONENT_KIT_VERSION = '0.1.6';
6
6
  export const COMPONENT_MANIFEST_SCHEMA_VERSION = CONTRACTS_COMPONENT_MANIFEST_SCHEMA_VERSION;
7
7
  export const COMPONENT_REVIEW_CHECKLIST_VERSION = 'component-review-checklist.v0.1.0';
8
8
  export function getComponentStandardStamp() {
package/dist/style.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import { type PromptFrameFontScale, type PromptFrameMotionIntensity, type PromptFrameStyleIntent } from '@promptframe/contracts';
2
+ export interface PromptFrameStyleContext {
3
+ width: number;
4
+ height: number;
5
+ fps: number;
6
+ durationInFrames: number;
7
+ }
8
+ export interface ResolvedPromptFrameStyle {
9
+ colors: {
10
+ background: string;
11
+ surface: string;
12
+ primary: string;
13
+ secondary: string;
14
+ accent: string;
15
+ textPrimary: string;
16
+ textSecondary: string;
17
+ };
18
+ spacing: {
19
+ unit: number;
20
+ safeArea: number;
21
+ gap: number;
22
+ };
23
+ radius: {
24
+ sm: number;
25
+ md: number;
26
+ lg: number;
27
+ };
28
+ motion: {
29
+ intensity: PromptFrameMotionIntensity;
30
+ presetId: string;
31
+ };
32
+ typography: {
33
+ fontScale: PromptFrameFontScale;
34
+ fontFamilyHint?: string;
35
+ };
36
+ }
37
+ export declare function resolvePromptFrameStyle(intent: PromptFrameStyleIntent | undefined, context: PromptFrameStyleContext): ResolvedPromptFrameStyle;
38
+ //# sourceMappingURL=style.d.ts.map
package/dist/style.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAE5B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE;QACN,SAAS,EAAE,0BAA0B,CAAC;QACtC,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,UAAU,EAAE;QACV,SAAS,EAAE,oBAAoB,CAAC;QAChC,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAmED,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,sBAAsB,GAAG,SAAS,EAC1C,OAAO,EAAE,uBAAuB,GAC/B,wBAAwB,CAyB1B"}
package/dist/style.js ADDED
@@ -0,0 +1,121 @@
1
+ import { promptFrameStyleIntentSchema, } from '@promptframe/contracts';
2
+ const TONE_PALETTES = {
3
+ business: {
4
+ background: '#0f172a',
5
+ surface: '#1e293b',
6
+ primary: '#e2e8f0',
7
+ secondary: '#94a3b8',
8
+ textPrimary: '#f8fafc',
9
+ textSecondary: '#cbd5e1',
10
+ },
11
+ tech: {
12
+ background: '#08111f',
13
+ surface: '#102033',
14
+ primary: '#dff7ff',
15
+ secondary: '#7dd3fc',
16
+ textPrimary: '#f0f9ff',
17
+ textSecondary: '#bae6fd',
18
+ },
19
+ minimal: {
20
+ background: '#fafafa',
21
+ surface: '#ffffff',
22
+ primary: '#111827',
23
+ secondary: '#6b7280',
24
+ textPrimary: '#111827',
25
+ textSecondary: '#4b5563',
26
+ },
27
+ warm: {
28
+ background: '#1c1917',
29
+ surface: '#292524',
30
+ primary: '#fed7aa',
31
+ secondary: '#fdba74',
32
+ textPrimary: '#fff7ed',
33
+ textSecondary: '#fed7aa',
34
+ },
35
+ playful: {
36
+ background: '#111827',
37
+ surface: '#1f2937',
38
+ primary: '#fbcfe8',
39
+ secondary: '#c4b5fd',
40
+ textPrimary: '#ffffff',
41
+ textSecondary: '#e9d5ff',
42
+ },
43
+ luxury: {
44
+ background: '#09090b',
45
+ surface: '#18181b',
46
+ primary: '#fde68a',
47
+ secondary: '#a1a1aa',
48
+ textPrimary: '#fafafa',
49
+ textSecondary: '#d4d4d8',
50
+ },
51
+ documentary: {
52
+ background: '#111111',
53
+ surface: '#262626',
54
+ primary: '#e5e5e5',
55
+ secondary: '#a3a3a3',
56
+ textPrimary: '#fafafa',
57
+ textSecondary: '#d4d4d4',
58
+ },
59
+ };
60
+ const DENSITY_SPACING = {
61
+ compact: { unit: 8, safeArea: 40, gap: 12 },
62
+ balanced: { unit: 12, safeArea: 56, gap: 18 },
63
+ spacious: { unit: 16, safeArea: 72, gap: 24 },
64
+ };
65
+ export function resolvePromptFrameStyle(intent, context) {
66
+ const parsed = promptFrameStyleIntentSchema.parse(intent ?? {});
67
+ const tone = parsed.tone ?? toneFromAspect(context);
68
+ const density = parsed.density ?? 'balanced';
69
+ const motionIntensity = parsed.motionIntensity ?? 'balanced';
70
+ const fontScale = parsed.fontScale ?? 'normal';
71
+ const palette = TONE_PALETTES[tone];
72
+ const accent = parsed.accentColor ?? parsed.brandTokens?.primaryColor ?? defaultAccentForTone(tone);
73
+ return {
74
+ colors: {
75
+ ...palette,
76
+ accent,
77
+ },
78
+ spacing: DENSITY_SPACING[density],
79
+ radius: radiusForDensity(density),
80
+ motion: {
81
+ intensity: motionIntensity,
82
+ presetId: `${tone}-${motionIntensity}`,
83
+ },
84
+ typography: {
85
+ fontScale,
86
+ ...(parsed.brandTokens?.fontFamilyHint ? { fontFamilyHint: parsed.brandTokens.fontFamilyHint } : {}),
87
+ },
88
+ };
89
+ }
90
+ function toneFromAspect(context) {
91
+ return context.height > context.width ? 'tech' : 'business';
92
+ }
93
+ function defaultAccentForTone(tone) {
94
+ switch (tone) {
95
+ case 'business':
96
+ return '#38bdf8';
97
+ case 'tech':
98
+ return '#22d3ee';
99
+ case 'minimal':
100
+ return '#111827';
101
+ case 'warm':
102
+ return '#fb923c';
103
+ case 'playful':
104
+ return '#f472b6';
105
+ case 'luxury':
106
+ return '#facc15';
107
+ case 'documentary':
108
+ return '#e5e5e5';
109
+ }
110
+ }
111
+ function radiusForDensity(density) {
112
+ switch (density) {
113
+ case 'compact':
114
+ return { sm: 4, md: 8, lg: 12 };
115
+ case 'spacious':
116
+ return { sm: 8, md: 14, lg: 20 };
117
+ case 'balanced':
118
+ return { sm: 6, md: 10, lg: 16 };
119
+ }
120
+ }
121
+ //# sourceMappingURL=style.js.map
package/dist/style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@promptframe/component-kit",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -19,6 +19,10 @@
19
19
  "import": "./dist/standard.js",
20
20
  "types": "./dist/standard.d.ts"
21
21
  },
22
+ "./style": {
23
+ "import": "./dist/style.js",
24
+ "types": "./dist/style.d.ts"
25
+ },
22
26
  "./preview": {
23
27
  "import": "./dist/preview.js",
24
28
  "types": "./dist/preview.d.ts"
@@ -53,7 +57,7 @@
53
57
  "clean": "rm -rf dist"
54
58
  },
55
59
  "dependencies": {
56
- "@promptframe/contracts": "^0.1.2"
60
+ "@promptframe/contracts": "^0.1.4"
57
61
  },
58
62
  "peerDependencies": {
59
63
  "react": "^19.0.0",