@hraness/design-kit 0.33.0 → 0.35.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.
Files changed (44) hide show
  1. package/README.md +19 -3
  2. package/dist/{chunk-mr1vdcjq.js → chunk-8xfssb9c.js} +6 -3
  3. package/dist/{chunk-95mpmzc9.js → chunk-c9mhn3yb.js} +1130 -442
  4. package/dist/{chunk-h4k7yv6x.js → chunk-fjf81bww.js} +28 -2
  5. package/dist/chunk-gmea6p0d.js +13 -0
  6. package/dist/index.js +5 -1
  7. package/dist/mockups/client.js +50 -15
  8. package/dist/portfolio.js +586 -85
  9. package/dist/react/index.js +141 -13
  10. package/dist/react/platform-install.js +3 -2
  11. package/dist/react/server.js +17 -3
  12. package/dist/stylex-manifest.json +1 -1
  13. package/dist/stylex.css +350 -36
  14. package/package.json +14 -3
  15. package/portfolio-inventory.json +1 -1
  16. package/src/diagrams.ts +11 -0
  17. package/src/index.ts +2 -0
  18. package/src/marketing-comparison.css +162 -0
  19. package/src/marketing-diagram.css +24 -0
  20. package/src/mockups/client.tsx +25 -17
  21. package/src/mockups.css +19 -0
  22. package/src/plain-publication.css +9 -6
  23. package/src/portfolio.generated.json +578 -86
  24. package/src/portfolio.generated.ts +578 -86
  25. package/src/portfolio.ts +73 -0
  26. package/src/product-marketing-foundation.css +29 -0
  27. package/src/product-marketing.css +136 -39
  28. package/src/react/article.tsx +2 -2
  29. package/src/react/design-gallery.tsx +37 -8
  30. package/src/react/index.ts +3 -0
  31. package/src/react/marketing-account.stylex.ts +74 -0
  32. package/src/react/marketing-account.tsx +69 -0
  33. package/src/react/marketing-comparison.stylex.ts +24 -0
  34. package/src/react/marketing-comparison.tsx +73 -0
  35. package/src/react/marketing-diagram.stylex.ts +8 -0
  36. package/src/react/marketing-diagram.tsx +33 -0
  37. package/src/react/platform-install.stylex.ts +2 -1
  38. package/src/react/platform-install.tsx +2 -1
  39. package/src/react/product-marketing.stylex.ts +144 -111
  40. package/src/react/product-marketing.tsx +83 -45
  41. package/src/react/server.ts +3 -0
  42. package/src/styles.css +2 -0
  43. package/src/typography.css +32 -0
  44. /package/dist/{chunk-4d79eskk.js → chunk-c80g58j1.js} +0 -0
@@ -9,7 +9,7 @@ import {
9
9
  } from "../chunk-8834fh4n.js";
10
10
  import {
11
11
  PlatformInstall
12
- } from "../chunk-mr1vdcjq.js";
12
+ } from "../chunk-8xfssb9c.js";
13
13
  import {
14
14
  ArticleBarChart,
15
15
  ArticleByline,
@@ -22,11 +22,15 @@ import {
22
22
  ArticleTable,
23
23
  ArticleVideo,
24
24
  BottomBar,
25
+ ComparisonGlyph,
25
26
  ComparisonTable,
27
+ DiagramArrowhead,
26
28
  DitherSurface,
27
29
  DockedFooter,
28
30
  FoilMark,
29
31
  LaunchBeats,
32
+ MarketingAccount,
33
+ MarketingAccountActions,
30
34
  MarketingActionLink,
31
35
  MarketingArticle,
32
36
  MarketingCallToAction,
@@ -34,7 +38,9 @@ import {
34
38
  MarketingCardArt,
35
39
  MarketingCardRow,
36
40
  MarketingCodeBlock,
41
+ MarketingComparison,
37
42
  MarketingDataTable,
43
+ MarketingDiagram,
38
44
  MarketingFacts,
39
45
  MarketingField,
40
46
  MarketingFlow,
@@ -65,7 +71,6 @@ import {
65
71
  ProductHero,
66
72
  ProviderMark,
67
73
  ProviderMarkChip,
68
- SyntaxCode,
69
74
  TopBar,
70
75
  articleFigureKinds,
71
76
  createParticleHaloRecipe,
@@ -83,8 +88,10 @@ import {
83
88
  marketingProofFrameAddress,
84
89
  proceduralBackdropVariants,
85
90
  proceduralRecipeVersion
86
- } from "../chunk-95mpmzc9.js";
87
- import"../chunk-h4k7yv6x.js";
91
+ } from "../chunk-c9mhn3yb.js";
92
+ import {
93
+ SyntaxCode
94
+ } from "../chunk-fjf81bww.js";
88
95
  import {
89
96
  STATUS_PAGE_AGENT_PREFIX,
90
97
  STATUS_PAGE_BACK_LABEL,
@@ -113,7 +120,8 @@ import {
113
120
  resolveStatusPage,
114
121
  statusPageRoutesAttribute,
115
122
  suggestStatusRoute
116
- } from "../chunk-4d79eskk.js";
123
+ } from "../chunk-c80g58j1.js";
124
+ import"../chunk-gmea6p0d.js";
117
125
  import"../chunk-wzvdn8ey.js";
118
126
  import"../chunk-he8eznb1.js";
119
127
  import"../chunk-77391vmq.js";
@@ -6498,6 +6506,7 @@ function DesignSystemGallery({
6498
6506
  }),
6499
6507
  /* @__PURE__ */ jsx17(MarketingPillars, {
6500
6508
  ariaLabel: "Relay in three points",
6509
+ presentation: "benefits",
6501
6510
  columns: 3,
6502
6511
  pillars: [{
6503
6512
  label: "No hosted service",
@@ -6675,6 +6684,7 @@ Run the job, then show me its log.`,
6675
6684
  ]
6676
6685
  }),
6677
6686
  /* @__PURE__ */ jsx17(MarketingInterfaceGrid, {
6687
+ columns: 2,
6678
6688
  heading: "Choose your interface.",
6679
6689
  headingId: "gallery-marketing-interfaces",
6680
6690
  headingLevel: 3,
@@ -6728,6 +6738,7 @@ Run the job, then show me its log.`,
6728
6738
  }]
6729
6739
  }),
6730
6740
  /* @__PURE__ */ jsx17(MarketingTrustBoundary, {
6741
+ columns: 2,
6731
6742
  heading: "What leaves your machine.",
6732
6743
  headingId: "gallery-marketing-trust",
6733
6744
  headingLevel: 3,
@@ -6840,33 +6851,144 @@ Run the job, then show me its log.`,
6840
6851
  }]
6841
6852
  }),
6842
6853
  /* @__PURE__ */ jsx17(MarketingRelated, {
6854
+ columns: 2,
6843
6855
  groups: [{
6844
- heading: "Sibling tools",
6856
+ heading: "Relationships",
6857
+ tone: "rose",
6845
6858
  headingId: "design-gallery-related-tools",
6846
6859
  items: [{
6847
6860
  href: "#gallery-install",
6848
6861
  name: "Ledger",
6862
+ domain: "ledger.example",
6849
6863
  role: "Long-term storage for run logs"
6850
6864
  }, {
6851
6865
  href: "#marketing",
6852
6866
  name: "Index",
6867
+ domain: "index.example",
6853
6868
  role: "A local search index"
6854
6869
  }]
6855
6870
  }, {
6856
- heading: "Shared infrastructure",
6871
+ columns: 1,
6872
+ heading: "Knowledge",
6873
+ tone: "indigo",
6857
6874
  headingId: "design-gallery-related-infra",
6858
6875
  items: [{
6859
6876
  href: "#marketing",
6860
6877
  name: "Relay",
6878
+ domain: "relay.example",
6861
6879
  role: "The shared job runner"
6862
- }],
6863
- summary: "The runner the other tools depend on."
6880
+ }]
6864
6881
  }],
6865
- heading: "Related tools.",
6882
+ heading: "Other tools from our studio",
6866
6883
  headingId: "design-gallery-related-title",
6867
- headingLevel: 3,
6868
- label: "Related",
6869
- summary: "Each is a separate release. Its card says how it works with Relay."
6884
+ headingLevel: 3
6885
+ }),
6886
+ /* @__PURE__ */ jsxs15(MarketingDiagram, {
6887
+ width: 720,
6888
+ height: 216,
6889
+ label: "Your sources stay on your device; your chosen agent reads the local workspace.",
6890
+ children: [
6891
+ /* @__PURE__ */ jsx17("defs", {
6892
+ children: /* @__PURE__ */ jsx17(DiagramArrowhead, {
6893
+ id: "gallery-diagram-arrow"
6894
+ })
6895
+ }),
6896
+ /* @__PURE__ */ jsx17("rect", {
6897
+ className: "hraness-diagram__node",
6898
+ x: 24,
6899
+ y: 40,
6900
+ width: 276,
6901
+ height: 136,
6902
+ rx: 12
6903
+ }),
6904
+ /* @__PURE__ */ jsx17("rect", {
6905
+ className: "hraness-diagram__node",
6906
+ x: 420,
6907
+ y: 40,
6908
+ width: 276,
6909
+ height: 136,
6910
+ rx: 12
6911
+ }),
6912
+ /* @__PURE__ */ jsx17("path", {
6913
+ className: "hraness-diagram__icon",
6914
+ d: "M48 66h18v14H48z M53 84h8 M57 80v4"
6915
+ }),
6916
+ /* @__PURE__ */ jsx17("text", {
6917
+ className: "hraness-diagram__label",
6918
+ x: 48,
6919
+ y: 116,
6920
+ children: "Your sources"
6921
+ }),
6922
+ /* @__PURE__ */ jsx17("text", {
6923
+ className: "hraness-diagram__detail",
6924
+ x: 48,
6925
+ y: 143,
6926
+ children: "Stored on your device"
6927
+ }),
6928
+ /* @__PURE__ */ jsx17("path", {
6929
+ className: "hraness-diagram__connector",
6930
+ d: "M320 108H400",
6931
+ markerEnd: "url(#gallery-diagram-arrow)"
6932
+ }),
6933
+ /* @__PURE__ */ jsx17("path", {
6934
+ className: "hraness-diagram__icon",
6935
+ d: "M444 73h18 M453 64v18 M447 67l12 12 M459 67l-12 12"
6936
+ }),
6937
+ /* @__PURE__ */ jsx17("text", {
6938
+ className: "hraness-diagram__label",
6939
+ x: 444,
6940
+ y: 116,
6941
+ children: "Your chosen agent"
6942
+ }),
6943
+ /* @__PURE__ */ jsx17("text", {
6944
+ className: "hraness-diagram__detail",
6945
+ x: 444,
6946
+ y: 143,
6947
+ children: "Reads the local workspace"
6948
+ })
6949
+ ]
6950
+ }),
6951
+ /* @__PURE__ */ jsx17(MarketingComparison, {
6952
+ caption: "Choose where your work lives",
6953
+ options: [{
6954
+ name: "Relay"
6955
+ }, {
6956
+ name: "Hosted workspace"
6957
+ }],
6958
+ highlight: 0,
6959
+ rows: [{
6960
+ label: "Works offline",
6961
+ values: [true, false]
6962
+ }, {
6963
+ label: "Bring your model",
6964
+ values: [true, {
6965
+ status: "optional",
6966
+ label: "On some plans"
6967
+ }]
6968
+ }, {
6969
+ label: "Local storage",
6970
+ values: [true, {
6971
+ status: "depends",
6972
+ detail: "Check the provider's export format."
6973
+ }]
6974
+ }, {
6975
+ label: "Cost",
6976
+ values: ["Free locally", "Subscription"]
6977
+ }],
6978
+ note: "An illustrative comparison. Product pages supply current facts and sources."
6979
+ }),
6980
+ /* @__PURE__ */ jsx17(MarketingAccount, {
6981
+ id: "gallery-account",
6982
+ summary: "Keep your preferences and shared work together.",
6983
+ children: /* @__PURE__ */ jsx17(MarketingAccountActions, {
6984
+ primary: {
6985
+ href: "#gallery-account",
6986
+ label: "Create account"
6987
+ },
6988
+ signIn: {
6989
+ href: "#gallery-account"
6990
+ }
6991
+ })
6870
6992
  }),
6871
6993
  /* @__PURE__ */ jsx17(MarketingMaker, {
6872
6994
  heading: "Who builds Relay",
@@ -8173,7 +8295,9 @@ export {
8173
8295
  MarketingFlow,
8174
8296
  MarketingField,
8175
8297
  MarketingFacts,
8298
+ MarketingDiagram,
8176
8299
  MarketingDataTable,
8300
+ MarketingComparison,
8177
8301
  MarketingCodeBlock,
8178
8302
  MarketingCardRow,
8179
8303
  MarketingCardArt,
@@ -8181,6 +8305,8 @@ export {
8181
8305
  MarketingCallToAction,
8182
8306
  MarketingArticle,
8183
8307
  MarketingActionLink,
8308
+ MarketingAccountActions,
8309
+ MarketingAccount,
8184
8310
  LaunchBeats,
8185
8311
  LanternMaterialGallery,
8186
8312
  HeroBackdrop,
@@ -8192,12 +8318,14 @@ export {
8192
8318
  Fader,
8193
8319
  DockedFooter,
8194
8320
  DitherSurface,
8321
+ DiagramArrowhead,
8195
8322
  DesignThemeProvider,
8196
8323
  DesignSystemGallery,
8197
8324
  DesignPortalThemeProvider,
8198
8325
  DesignPaletteProvider,
8199
8326
  DesignPaletteMenuButton,
8200
8327
  ComparisonTable,
8328
+ ComparisonGlyph,
8201
8329
  ChatMessage,
8202
8330
  ChatComposer,
8203
8331
  BottomBar,
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  PlatformInstall
4
- } from "../chunk-mr1vdcjq.js";
5
- import"../chunk-h4k7yv6x.js";
4
+ } from "../chunk-8xfssb9c.js";
5
+ import"../chunk-fjf81bww.js";
6
6
  import"../chunk-wzvdn8ey.js";
7
+ import"../chunk-he8eznb1.js";
7
8
  import"../chunk-5gtx3pza.js";
8
9
  export {
9
10
  PlatformInstall
@@ -10,11 +10,15 @@ import {
10
10
  ArticleTable,
11
11
  ArticleVideo,
12
12
  BottomBar,
13
+ ComparisonGlyph,
13
14
  ComparisonTable,
15
+ DiagramArrowhead,
14
16
  DitherSurface,
15
17
  DockedFooter,
16
18
  FoilMark,
17
19
  LaunchBeats,
20
+ MarketingAccount,
21
+ MarketingAccountActions,
18
22
  MarketingActionLink,
19
23
  MarketingArticle,
20
24
  MarketingCallToAction,
@@ -22,7 +26,9 @@ import {
22
26
  MarketingCardArt,
23
27
  MarketingCardRow,
24
28
  MarketingCodeBlock,
29
+ MarketingComparison,
25
30
  MarketingDataTable,
31
+ MarketingDiagram,
26
32
  MarketingFacts,
27
33
  MarketingField,
28
34
  MarketingFlow,
@@ -53,7 +59,6 @@ import {
53
59
  ProductHero,
54
60
  ProviderMark,
55
61
  ProviderMarkChip,
56
- SyntaxCode,
57
62
  TopBar,
58
63
  articleFigureKinds,
59
64
  createParticleHaloRecipe,
@@ -63,8 +68,11 @@ import {
63
68
  marketingProofFrameAddress,
64
69
  proceduralBackdropVariants,
65
70
  proceduralRecipeVersion
66
- } from "../chunk-95mpmzc9.js";
67
- import"../chunk-h4k7yv6x.js";
71
+ } from "../chunk-c9mhn3yb.js";
72
+ import {
73
+ SyntaxCode
74
+ } from "../chunk-fjf81bww.js";
75
+ import"../chunk-gmea6p0d.js";
68
76
  import"../chunk-wzvdn8ey.js";
69
77
  import"../chunk-he8eznb1.js";
70
78
  import"../chunk-77391vmq.js";
@@ -112,7 +120,9 @@ export {
112
120
  MarketingFlow,
113
121
  MarketingField,
114
122
  MarketingFacts,
123
+ MarketingDiagram,
115
124
  MarketingDataTable,
125
+ MarketingComparison,
116
126
  MarketingCodeBlock,
117
127
  MarketingCardRow,
118
128
  MarketingCardArt,
@@ -120,11 +130,15 @@ export {
120
130
  MarketingCallToAction,
121
131
  MarketingArticle,
122
132
  MarketingActionLink,
133
+ MarketingAccountActions,
134
+ MarketingAccount,
123
135
  LaunchBeats,
124
136
  FoilMark,
125
137
  DockedFooter,
126
138
  DitherSurface,
139
+ DiagramArrowhead,
127
140
  ComparisonTable,
141
+ ComparisonGlyph,
128
142
  BottomBar,
129
143
  ArticleVideo,
130
144
  ArticleTable,