@almadar/ui 5.1.4 → 5.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.
@@ -5958,108 +5958,315 @@ var init_iconFamily = __esm({
5958
5958
  };
5959
5959
  phosphorAliases = {
5960
5960
  // lucide name → phosphor PascalCase name
5961
- search: "MagnifyingGlass",
5961
+ // Actions
5962
+ plus: "Plus",
5963
+ minus: "Minus",
5964
+ x: "X",
5965
+ check: "Check",
5962
5966
  close: "X",
5963
- loader: "CircleNotch",
5967
+ edit: "PencilSimple",
5968
+ pencil: "PencilSimple",
5969
+ trash: "Trash",
5970
+ save: "FloppyDisk",
5971
+ copy: "Copy",
5972
+ share: "Share",
5973
+ send: "PaperPlaneRight",
5974
+ download: "DownloadSimple",
5975
+ upload: "UploadSimple",
5976
+ archive: "Archive",
5964
5977
  refresh: "ArrowsClockwise",
5965
- "sort-asc": "SortAscending",
5966
- "sort-desc": "SortDescending",
5978
+ loader: "CircleNotch",
5979
+ link: "Link",
5980
+ paperclip: "Paperclip",
5981
+ // Navigation
5967
5982
  "chevron-down": "CaretDown",
5968
5983
  "chevron-up": "CaretUp",
5969
5984
  "chevron-left": "CaretLeft",
5970
5985
  "chevron-right": "CaretRight",
5971
- "help-circle": "Question",
5972
- "alert-triangle": "Warning",
5986
+ "arrow-up": "ArrowUp",
5987
+ "arrow-down": "ArrowDown",
5988
+ "arrow-left": "ArrowLeft",
5989
+ "arrow-right": "ArrowRight",
5990
+ menu: "List",
5991
+ more: "DotsThree",
5992
+ "more-vertical": "DotsThreeVertical",
5993
+ "more-horizontal": "DotsThree",
5994
+ external: "ArrowSquareOut",
5995
+ "external-link": "ArrowSquareOut",
5996
+ // Files
5997
+ file: "File",
5998
+ "file-text": "FileText",
5999
+ "file-plus": "FilePlus",
6000
+ "file-minus": "FileMinus",
6001
+ folder: "Folder",
6002
+ "folder-open": "FolderOpen",
6003
+ document: "FileText",
6004
+ // Charts
6005
+ "bar-chart": "ChartBar",
6006
+ "bar-chart-2": "ChartBar",
6007
+ "bar-chart-3": "ChartBar",
6008
+ "line-chart": "ChartLine",
6009
+ "pie-chart": "ChartPie",
6010
+ activity: "Pulse",
6011
+ "trending-up": "TrendUp",
6012
+ "trending-down": "TrendDown",
6013
+ // Messages
6014
+ message: "ChatCircle",
6015
+ "message-circle": "ChatCircle",
6016
+ "message-square": "ChatText",
6017
+ "messages-square": "ChatsCircle",
6018
+ comment: "ChatCircle",
6019
+ comments: "ChatsCircle",
6020
+ inbox: "Tray",
6021
+ mail: "Envelope",
6022
+ envelope: "Envelope",
6023
+ // Status
5973
6024
  "alert-circle": "WarningCircle",
6025
+ "alert-triangle": "Warning",
5974
6026
  "check-circle": "CheckCircle",
5975
6027
  "x-circle": "XCircle",
5976
- edit: "PencilSimple",
5977
- pencil: "PencilSimple",
5978
- trash: "Trash",
5979
- send: "PaperPlaneRight",
5980
- external: "ArrowSquareOut",
5981
- "external-link": "ArrowSquareOut",
5982
- plus: "Plus",
5983
- minus: "Minus",
5984
- x: "X",
5985
- check: "Check",
5986
- star: "Star",
5987
- heart: "Heart",
5988
- home: "House",
6028
+ info: "Info",
6029
+ "help-circle": "Question",
6030
+ "life-buoy": "Lifebuoy",
6031
+ lifebuoy: "Lifebuoy",
6032
+ warning: "Warning",
6033
+ error: "WarningCircle",
6034
+ // Media
6035
+ image: "Image",
6036
+ video: "VideoCamera",
6037
+ film: "FilmStrip",
6038
+ camera: "Camera",
6039
+ music: "MusicNote",
6040
+ play: "Play",
6041
+ pause: "Pause",
6042
+ stop: "Stop",
6043
+ "skip-forward": "SkipForward",
6044
+ "skip-back": "SkipBack",
6045
+ volume: "SpeakerHigh",
6046
+ "volume-2": "SpeakerHigh",
6047
+ "volume-x": "SpeakerX",
6048
+ mic: "Microphone",
6049
+ "mic-off": "MicrophoneSlash",
6050
+ // People
5989
6051
  user: "User",
5990
6052
  users: "Users",
5991
- settings: "Gear",
5992
- menu: "List",
5993
- "arrow-up": "ArrowUp",
5994
- "arrow-down": "ArrowDown",
5995
- "arrow-left": "ArrowLeft",
5996
- "arrow-right": "ArrowRight",
5997
- copy: "Copy",
5998
- download: "DownloadSimple",
5999
- upload: "UploadSimple",
6000
- filter: "Funnel",
6053
+ "user-plus": "UserPlus",
6054
+ "user-check": "UserCheck",
6055
+ // Time
6001
6056
  calendar: "Calendar",
6002
6057
  clock: "Clock",
6058
+ timer: "Timer",
6059
+ // Location
6060
+ map: "MapTrifold",
6061
+ "map-pin": "MapPin",
6062
+ navigation: "NavigationArrow",
6063
+ compass: "Compass",
6064
+ globe: "Globe",
6065
+ target: "Target",
6066
+ // Project / layout
6067
+ kanban: "Kanban",
6068
+ list: "List",
6069
+ table: "Table",
6070
+ grid: "GridFour",
6071
+ layout: "Layout",
6072
+ columns: "Columns",
6073
+ rows: "Rows",
6074
+ // Misc
6003
6075
  bell: "Bell",
6004
- mail: "Envelope",
6005
- envelope: "Envelope",
6006
- lock: "Lock",
6007
- unlock: "LockOpen",
6076
+ bookmark: "Bookmark",
6077
+ briefcase: "Briefcase",
6078
+ flag: "Flag",
6079
+ tag: "Tag",
6080
+ tags: "Tag",
6081
+ star: "Star",
6082
+ heart: "Heart",
6083
+ home: "House",
6084
+ settings: "Gear",
6008
6085
  eye: "Eye",
6009
6086
  "eye-off": "EyeSlash",
6010
- more: "DotsThree",
6011
- "more-vertical": "DotsThreeVertical",
6012
- info: "Info",
6013
- warning: "Warning",
6014
- error: "WarningCircle"
6087
+ lock: "Lock",
6088
+ unlock: "LockOpen",
6089
+ key: "Key",
6090
+ shield: "Shield",
6091
+ search: "MagnifyingGlass",
6092
+ filter: "Funnel",
6093
+ "sort-asc": "SortAscending",
6094
+ "sort-desc": "SortDescending",
6095
+ zap: "Lightning",
6096
+ sparkles: "Sparkle",
6097
+ // Code
6098
+ code: "Code",
6099
+ terminal: "Terminal",
6100
+ database: "Database",
6101
+ server: "HardDrives",
6102
+ cloud: "Cloud",
6103
+ wifi: "WifiHigh",
6104
+ package: "Package",
6105
+ box: "Package",
6106
+ // Theme
6107
+ sun: "Sun",
6108
+ moon: "Moon",
6109
+ // Phone
6110
+ phone: "Phone",
6111
+ printer: "Printer",
6112
+ // Hierarchy
6113
+ tree: "Tree",
6114
+ network: "Network"
6015
6115
  };
6016
6116
  tablerAliases = {
6017
6117
  // lucide name → tabler suffix (after the `Icon` prefix)
6018
- search: "Search",
6118
+ // Actions
6119
+ plus: "Plus",
6120
+ minus: "Minus",
6121
+ x: "X",
6122
+ check: "Check",
6019
6123
  close: "X",
6020
- loader: "Loader2",
6124
+ edit: "Pencil",
6125
+ pencil: "Pencil",
6126
+ trash: "Trash",
6127
+ save: "DeviceFloppy",
6128
+ copy: "Copy",
6129
+ share: "Share",
6130
+ send: "Send",
6131
+ download: "Download",
6132
+ upload: "Upload",
6133
+ archive: "Archive",
6021
6134
  refresh: "Refresh",
6022
- "sort-asc": "SortAscending",
6023
- "sort-desc": "SortDescending",
6135
+ loader: "Loader2",
6136
+ link: "Link",
6137
+ paperclip: "Paperclip",
6138
+ external: "ExternalLink",
6139
+ "external-link": "ExternalLink",
6140
+ // Navigation
6024
6141
  "chevron-down": "ChevronDown",
6025
6142
  "chevron-up": "ChevronUp",
6026
6143
  "chevron-left": "ChevronLeft",
6027
6144
  "chevron-right": "ChevronRight",
6028
- "help-circle": "HelpCircle",
6029
- "alert-triangle": "AlertTriangle",
6145
+ "arrow-down": "ArrowDown",
6146
+ "arrow-up": "ArrowUp",
6147
+ "arrow-left": "ArrowLeft",
6148
+ "arrow-right": "ArrowRight",
6149
+ menu: "Menu2",
6150
+ more: "Dots",
6151
+ "more-vertical": "DotsVertical",
6152
+ // Files
6153
+ file: "File",
6154
+ "file-text": "FileText",
6155
+ "file-plus": "FilePlus",
6156
+ "file-check": "FileCheck",
6157
+ "file-minus": "FileMinus",
6158
+ folder: "Folder",
6159
+ "folder-open": "FolderOpen",
6160
+ document: "FileText",
6161
+ // Charts
6162
+ "bar-chart": "ChartBar",
6163
+ "bar-chart-2": "ChartBar",
6164
+ "bar-chart-3": "ChartBar",
6165
+ "line-chart": "ChartLine",
6166
+ "pie-chart": "ChartPie",
6167
+ activity: "Activity",
6168
+ "trending-up": "TrendingUp",
6169
+ "trending-down": "TrendingDown",
6170
+ // Messages
6171
+ message: "Message",
6172
+ "message-circle": "MessageCircle",
6173
+ "message-square": "Message2",
6174
+ "messages-square": "Messages",
6175
+ comment: "Message",
6176
+ comments: "Messages",
6177
+ inbox: "Inbox",
6178
+ mail: "Mail",
6179
+ envelope: "Mail",
6180
+ // Status
6030
6181
  "alert-circle": "AlertCircle",
6182
+ "alert-triangle": "AlertTriangle",
6031
6183
  "check-circle": "CircleCheck",
6032
6184
  "x-circle": "CircleX",
6033
- edit: "Pencil",
6034
- trash: "Trash",
6035
- send: "Send",
6036
- external: "ExternalLink",
6037
- plus: "Plus",
6038
- x: "X",
6039
- check: "Check",
6040
- star: "Star",
6041
- heart: "Heart",
6042
- home: "Home",
6185
+ info: "InfoCircle",
6186
+ "help-circle": "HelpCircle",
6187
+ "life-buoy": "Lifebuoy",
6188
+ warning: "AlertTriangle",
6189
+ error: "AlertOctagon",
6190
+ // Media
6191
+ image: "Photo",
6192
+ video: "Video",
6193
+ camera: "Camera",
6194
+ music: "Music",
6195
+ play: "PlayerPlay",
6196
+ pause: "PlayerPause",
6197
+ stop: "PlayerStop",
6198
+ "skip-forward": "PlayerSkipForward",
6199
+ "skip-back": "PlayerSkipBack",
6200
+ volume: "Volume",
6201
+ "volume-2": "Volume",
6202
+ "volume-x": "VolumeOff",
6203
+ mic: "Microphone",
6204
+ "mic-off": "MicrophoneOff",
6205
+ // People
6043
6206
  user: "User",
6044
6207
  users: "Users",
6045
- settings: "Settings",
6046
- menu: "Menu2",
6047
- copy: "Copy",
6048
- download: "Download",
6049
- upload: "Upload",
6050
- filter: "Filter",
6208
+ "user-plus": "UserPlus",
6209
+ "user-check": "UserCheck",
6210
+ // Time
6051
6211
  calendar: "Calendar",
6052
6212
  clock: "Clock",
6213
+ timer: "Hourglass",
6214
+ // Location
6215
+ map: "Map",
6216
+ "map-pin": "MapPin",
6217
+ navigation: "Navigation",
6218
+ compass: "Compass",
6219
+ globe: "World",
6220
+ target: "Target",
6221
+ // Project / layout
6222
+ kanban: "LayoutKanban",
6223
+ list: "List",
6224
+ table: "Table",
6225
+ grid: "LayoutGrid",
6226
+ layout: "Layout",
6227
+ columns: "LayoutColumns",
6228
+ rows: "LayoutRows",
6229
+ // Misc
6053
6230
  bell: "Bell",
6054
- mail: "Mail",
6055
- envelope: "Mail",
6056
- lock: "Lock",
6057
- unlock: "LockOpen",
6231
+ bookmark: "Bookmark",
6232
+ briefcase: "Briefcase",
6233
+ flag: "Flag",
6234
+ tag: "Tag",
6235
+ tags: "Tags",
6236
+ star: "Star",
6237
+ heart: "Heart",
6238
+ home: "Home",
6239
+ settings: "Settings",
6058
6240
  eye: "Eye",
6059
6241
  "eye-off": "EyeOff",
6060
- more: "Dots",
6061
- "more-vertical": "DotsVertical",
6062
- info: "InfoCircle"
6242
+ lock: "Lock",
6243
+ unlock: "LockOpen",
6244
+ key: "Key",
6245
+ shield: "Shield",
6246
+ search: "Search",
6247
+ filter: "Filter",
6248
+ "sort-asc": "SortAscending",
6249
+ "sort-desc": "SortDescending",
6250
+ zap: "Bolt",
6251
+ sparkles: "Sparkles",
6252
+ // Code / data
6253
+ code: "Code",
6254
+ terminal: "Terminal",
6255
+ database: "Database",
6256
+ server: "Server",
6257
+ cloud: "Cloud",
6258
+ wifi: "Wifi",
6259
+ package: "Package",
6260
+ box: "Box",
6261
+ // Theme
6262
+ sun: "Sun",
6263
+ moon: "Moon",
6264
+ // Phone
6265
+ phone: "Phone",
6266
+ printer: "Printer",
6267
+ // Hierarchy
6268
+ tree: "Hierarchy",
6269
+ network: "Network"
6063
6270
  };
6064
6271
  faAliases = {
6065
6272
  // lucide name → fa-solid suffix (after the `Fa` prefix).
@@ -6084,9 +6291,10 @@ var init_iconFamily = __esm({
6084
6291
  "check-circle": "CheckCircle",
6085
6292
  "x-circle": "TimesCircle",
6086
6293
  edit: "Edit",
6087
- pencil: "Pencil",
6294
+ pencil: "PencilAlt",
6088
6295
  trash: "Trash",
6089
6296
  send: "PaperPlane",
6297
+ share: "ShareAlt",
6090
6298
  external: "ExternalLinkAlt",
6091
6299
  plus: "Plus",
6092
6300
  minus: "Minus",
@@ -6096,6 +6304,8 @@ var init_iconFamily = __esm({
6096
6304
  home: "Home",
6097
6305
  user: "User",
6098
6306
  users: "Users",
6307
+ "user-plus": "UserPlus",
6308
+ "user-check": "UserCheck",
6099
6309
  settings: "Cog",
6100
6310
  menu: "Bars",
6101
6311
  "arrow-up": "ArrowUp",
@@ -6119,6 +6329,9 @@ var init_iconFamily = __esm({
6119
6329
  "more-vertical": "EllipsisV",
6120
6330
  info: "InfoCircle",
6121
6331
  warning: "ExclamationTriangle",
6332
+ error: "ExclamationCircle",
6333
+ // Time
6334
+ timer: "Hourglass",
6122
6335
  // Files (FA renamed FileText → FileAlt)
6123
6336
  file: "File",
6124
6337
  "file-text": "FileAlt",
@@ -6177,6 +6390,7 @@ var init_iconFamily = __esm({
6177
6390
  music: "Music",
6178
6391
  play: "Play",
6179
6392
  pause: "Pause",
6393
+ stop: "Stop",
6180
6394
  "skip-forward": "Forward",
6181
6395
  "skip-back": "Backward",
6182
6396
  volume: "VolumeUp",
@@ -6204,7 +6418,14 @@ var init_iconFamily = __esm({
6204
6418
  flag: "Flag",
6205
6419
  tag: "Tag",
6206
6420
  tags: "Tags",
6207
- zap: "Bolt"
6421
+ zap: "Bolt",
6422
+ sparkles: "Magic",
6423
+ // Theme
6424
+ sun: "Sun",
6425
+ moon: "Moon",
6426
+ // Hierarchy (FA has no Tree icon for hierarchies; Sitemap is the org-chart icon)
6427
+ tree: "Sitemap",
6428
+ network: "NetworkWired"
6208
6429
  };
6209
6430
  warned = /* @__PURE__ */ new Set();
6210
6431
  }
@@ -58161,9 +58382,25 @@ function detectScreenSize(viewportWidth) {
58161
58382
  }
58162
58383
 
58163
58384
  // components/molecules/avl/avl-preview-converter.ts
58164
- var OVERVIEW_SPACING = 900;
58165
- var EXPANDED_SPACING_X = 900;
58166
- var EXPANDED_SPACING_Y = 600;
58385
+ var OVERVIEW_GAP_X = 160;
58386
+ var OVERVIEW_GAP_Y = 240;
58387
+ var EXPANDED_GAP_X = 160;
58388
+ var EXPANDED_GAP_Y = 240;
58389
+ var CARD_CHROME_Y = 120;
58390
+ function computeSpacing(screenSize = "wide") {
58391
+ const preset = SCREEN_SIZE_PRESETS[screenSize];
58392
+ return {
58393
+ x: preset.width + OVERVIEW_GAP_X,
58394
+ y: preset.minHeight + CARD_CHROME_Y + OVERVIEW_GAP_Y
58395
+ };
58396
+ }
58397
+ function computeExpandedSpacing(screenSize = "wide") {
58398
+ const preset = SCREEN_SIZE_PRESETS[screenSize];
58399
+ return {
58400
+ x: preset.width + EXPANDED_GAP_X,
58401
+ y: preset.minHeight + CARD_CHROME_Y + EXPANDED_GAP_Y
58402
+ };
58403
+ }
58167
58404
  function getOrbitals(schema) {
58168
58405
  return schema.orbitals ?? [];
58169
58406
  }
@@ -58352,12 +58589,13 @@ function extractTraitWires(orbitals, scope) {
58352
58589
  function findCrossLinks(orbitals) {
58353
58590
  return extractTraitWires(orbitals, "cross-orbital");
58354
58591
  }
58355
- function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus) {
58592
+ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize) {
58356
58593
  const orbitals = getOrbitals(schema);
58357
58594
  const nodes = [];
58358
58595
  const edges = [];
58359
58596
  const count = orbitals.length;
58360
58597
  const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
58598
+ const spacing = computeSpacing(screenSize);
58361
58599
  for (let i = 0; i < orbitals.length; i++) {
58362
58600
  const orb = orbitals[i];
58363
58601
  const entityInfo = getEntityInfo(orb);
@@ -58417,7 +58655,7 @@ function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint, orbit
58417
58655
  nodes.push({
58418
58656
  id: orb.name,
58419
58657
  type: "preview",
58420
- position: { x: col * OVERVIEW_SPACING, y: row * OVERVIEW_SPACING },
58658
+ position: { x: col * spacing.x, y: row * spacing.y },
58421
58659
  data: {
58422
58660
  orbitalName: orb.name,
58423
58661
  patterns: initPatterns,
@@ -58481,9 +58719,10 @@ function collectUITransitions(orbital, filter) {
58481
58719
  }
58482
58720
  return out;
58483
58721
  }
58484
- function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData) {
58722
+ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedBehaviors, mockData, screenSize) {
58485
58723
  const nodes = [];
58486
58724
  const edges = [];
58725
+ const spacing = computeExpandedSpacing(screenSize);
58487
58726
  const stateRepresentativeMap = /* @__PURE__ */ new Map();
58488
58727
  for (const entry of transitions) {
58489
58728
  const key = `${entry.traitName}:${entry.transition.to}`;
@@ -58509,7 +58748,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
58509
58748
  nodes.push({
58510
58749
  id: nodeId,
58511
58750
  type: "preview",
58512
- position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
58751
+ position: { x: col * spacing.x, y: row * spacing.y },
58513
58752
  data: {
58514
58753
  orbitalName,
58515
58754
  traitName: entry.traitName,
@@ -58537,7 +58776,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
58537
58776
  nodes.push({
58538
58777
  id: nodeId,
58539
58778
  type: "preview",
58540
- position: { x: col * EXPANDED_SPACING_X, y: row * EXPANDED_SPACING_Y },
58779
+ position: { x: col * spacing.x, y: row * spacing.y },
58541
58780
  data: {
58542
58781
  orbitalName,
58543
58782
  traitName: group.representative.traitName,
@@ -58592,7 +58831,7 @@ function buildScreenGraph(schema, orbitalName, entityName, transitions, groupedB
58592
58831
  }
58593
58832
  return { nodes, edges };
58594
58833
  }
58595
- function orbitalToExpandedGraph(schema, orbitalName, mockData) {
58834
+ function orbitalToExpandedGraph(schema, orbitalName, mockData, screenSize) {
58596
58835
  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
58597
58836
  if (!orbital) return { nodes: [], edges: [] };
58598
58837
  const entityInfo = getEntityInfo(orbital);
@@ -58632,10 +58871,11 @@ function orbitalToExpandedGraph(schema, orbitalName, mockData) {
58632
58871
  entityInfo.name,
58633
58872
  organismTransitions,
58634
58873
  groupedBehaviors,
58635
- mockData
58874
+ mockData,
58875
+ screenSize
58636
58876
  );
58637
58877
  }
58638
- function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
58878
+ function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData, screenSize) {
58639
58879
  const orbital = getOrbitals(schema).find((o) => o.name === orbitalName);
58640
58880
  if (!orbital) return { nodes: [], edges: [] };
58641
58881
  const entityInfo = getEntityInfo(orbital);
@@ -58649,7 +58889,8 @@ function orbitalAliasToExpandedGraph(schema, orbitalName, alias, mockData) {
58649
58889
  entityInfo.name,
58650
58890
  transitions,
58651
58891
  [],
58652
- mockData
58892
+ mockData,
58893
+ screenSize
58653
58894
  );
58654
58895
  }
58655
58896
  var TRAIT_CARD_SPACING_X = 480;
@@ -63268,9 +63509,9 @@ function FlowCanvasInner({
63268
63509
  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges, behaviorExpandedNodes, behaviorExpandedEdges, traitExpandedNodes, traitExpandedEdges } = React98.useMemo(() => {
63269
63510
  const t = perfStart("compose-graph");
63270
63511
  const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
63271
- const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus);
63272
- const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
63273
- const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData) : { nodes: [], edges: [] };
63512
+ const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint, orbitalStatus, screenSize);
63513
+ const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData, screenSize) : { nodes: [], edges: [] };
63514
+ const behaviorExpanded = expandedOrbital && expandedBehaviorAlias ? orbitalAliasToExpandedGraph(parsedSchema, expandedOrbital, expandedBehaviorAlias, mockData, screenSize) : { nodes: [], edges: [] };
63274
63515
  const traitExpanded = expandedOrbital ? orbitalToTraitGraph(parsedSchema, expandedOrbital) : { nodes: [], edges: [] };
63275
63516
  perfEnd("compose-graph", t, {
63276
63517
  composeNodes: compose.nodes.length,
@@ -63292,7 +63533,7 @@ function FlowCanvasInner({
63292
63533
  traitExpandedNodes: traitExpanded.nodes,
63293
63534
  traitExpandedEdges: traitExpanded.edges
63294
63535
  };
63295
- }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus]);
63536
+ }, [parsedSchema, expandedOrbital, expandedBehaviorAlias, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData, orbitalStatus, screenSize]);
63296
63537
  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : level === "behavior-expanded" ? behaviorExpandedNodes : level === "trait-expanded" ? traitExpandedNodes : expandedNodes;
63297
63538
  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : level === "behavior-expanded" ? behaviorExpandedEdges : level === "trait-expanded" ? traitExpandedEdges : expandedEdges;
63298
63539
  const [nodes, setNodes, onNodesChange] = react.useNodesState(activeNodes);
@@ -63303,7 +63544,7 @@ function FlowCanvasInner({
63303
63544
  setNodes(activeNodes);
63304
63545
  setEdges(activeEdges);
63305
63546
  requestAnimationFrame(() => {
63306
- reactFlow.fitView({ duration: 300, padding: 0.15 });
63547
+ reactFlow.fitView({ duration: 300, padding: 0.25 });
63307
63548
  });
63308
63549
  }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
63309
63550
  const visibleEdges = React98.useMemo(() => {
@@ -63484,7 +63725,7 @@ function FlowCanvasInner({
63484
63725
  minZoom: 0.1,
63485
63726
  maxZoom: 2,
63486
63727
  fitView: true,
63487
- fitViewOptions: { padding: 0.15 },
63728
+ fitViewOptions: { padding: 0.25 },
63488
63729
  nodesDraggable: true,
63489
63730
  elementsSelectable: true,
63490
63731
  proOptions: { hideAttribution: true },
@@ -63541,7 +63782,7 @@ function FlowCanvasInner({
63541
63782
  onClick: () => {
63542
63783
  pickScreenSize(size);
63543
63784
  requestAnimationFrame(() => {
63544
- reactFlow.fitView({ duration: 300, padding: 0.15 });
63785
+ reactFlow.fitView({ duration: 300, padding: 0.25 });
63545
63786
  });
63546
63787
  },
63547
63788
  className: `px-2 py-1 text-[11px] font-medium rounded cursor-pointer border-none transition-colors ${active ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
@@ -846,6 +846,22 @@ declare const AvlBindingEdge: React__default.FC<EdgeProps>;
846
846
  * from the L1 grid. Not used by the canvas tab today.
847
847
  */
848
848
  type ViewLevel = 'overview' | 'expanded' | 'behavior-expanded' | 'trait-expanded';
849
+ /**
850
+ * Screen size preset for OrbPreview rendering inside nodes.
851
+ *
852
+ * Aligned with the four-breakpoint responsiveness audit:
853
+ * mobile — phone portrait (≤640px)
854
+ * tablet — iPad / small landscape (641–1024px)
855
+ * laptop — 13–15" notebook (1025–1440px)
856
+ * wide — desktop / monitor (≥1441px)
857
+ *
858
+ * Preset widths are representative viewport widths within each range; the
859
+ * preview renders at exactly this width so the embedded UI experiences
860
+ * the same media-query / container-query behavior it would at the real
861
+ * viewport. `minHeight` only floors the preview frame; vertical sizing is
862
+ * content-driven (BrowserPlayground height="auto").
863
+ */
864
+ type ScreenSize = 'mobile' | 'tablet' | 'laptop' | 'wide';
849
865
  /**
850
866
  * An interactive element inside a render-ui pattern that fires an event.
851
867
  * For example, a button with `event: "CHECKOUT"` is an event source.
@@ -1041,7 +1057,7 @@ interface EventEdgeData extends Record<string, unknown> {
1041
1057
  */
1042
1058
  declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<string, unknown[]>, behaviorMeta?: Record<string, {
1043
1059
  layer: string;
1044
- }>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>): {
1060
+ }>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>, screenSize?: ScreenSize): {
1045
1061
  nodes: Node<PreviewNodeData>[];
1046
1062
  edges: Edge<EventEdgeData>[];
1047
1063
  };
@@ -1056,7 +1072,7 @@ declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: Record<
1056
1072
  * anonymous `INIT` peers (STUDIO-1). Drill into a grouped card to reach
1057
1073
  * L3 (`orbitalAliasToExpandedGraph`).
1058
1074
  */
1059
- declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>): {
1075
+ declare function orbitalToExpandedGraph(schema: OrbitalSchema, orbitalName: string, mockData?: Record<string, unknown[]>, screenSize?: ScreenSize): {
1060
1076
  nodes: Node<PreviewNodeData>[];
1061
1077
  edges: Edge<EventEdgeData>[];
1062
1078
  };