@snackbit/opendil 0.1.0 → 0.2.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 (88) hide show
  1. package/README.md +74 -137
  2. package/bin/opendil.mjs +66 -11
  3. package/bin/publish-directory.d.mts +18 -0
  4. package/bin/publish-directory.mjs +173 -17
  5. package/dist/agent-spec.js +9 -0
  6. package/dist/chunk-RPZW4WVX.js +2 -0
  7. package/dist/chunk-ZSTXLIS6.js +2 -0
  8. package/dist/index.js +1 -10
  9. package/dist/runtime/frame.html +117 -44
  10. package/dist/runtime/frame.js +501 -505
  11. package/dist/spec/genui.agent.full.md +1927 -0
  12. package/dist/spec/genui.agent.md +479 -0
  13. package/dist/spec/genui.examples.md +836 -0
  14. package/dist/styled-renderer-PHI4MNPF.js +2441 -0
  15. package/dist/styles.css +115 -42
  16. package/dist/types/agent-spec.d.ts +12 -0
  17. package/dist/types/components/ui/controls/select.d.ts +14 -0
  18. package/dist/types/components/ui/controls/tabs.d.ts +7 -0
  19. package/dist/types/components/ui/controls/toggle-group.d.ts +3 -2
  20. package/dist/types/components/ui/display/chart.d.ts +6 -12
  21. package/dist/types/components/ui/media/carousel.d.ts +1 -1
  22. package/dist/types/components/ui/overlays/collapsible.d.ts +6 -0
  23. package/dist/types/components/ui/overlays/popover.d.ts +2 -1
  24. package/dist/types/components/ui/overlays/ui-scope.d.ts +16 -0
  25. package/dist/types/dil/custom-component.d.ts +1 -1
  26. package/dist/types/dil/dil-renderer.d.ts +58 -23
  27. package/dist/types/dil/isolation/frame-startup.d.ts +18 -0
  28. package/dist/types/dil/isolation/frame-theme.d.ts +14 -0
  29. package/dist/types/dil/isolation/frame-viewport.d.ts +30 -0
  30. package/dist/types/dil/isolation/isolated-renderer.d.ts +13 -7
  31. package/dist/types/dil/isolation/overlay-room.d.ts +29 -0
  32. package/dist/types/dil/isolation/viewport-scroll.d.ts +3 -2
  33. package/dist/types/dil/message-renderer.d.ts +6 -5
  34. package/dist/types/dil/parser/dil-parser.d.ts +44 -3
  35. package/dist/types/dil/parser/lexical.d.ts +13 -2
  36. package/dist/types/dil/parser/literal-tag.d.ts +16 -0
  37. package/dist/types/dil/parser/markdown-lexing.d.ts +41 -0
  38. package/dist/types/dil/parser/types.d.ts +22 -1
  39. package/dist/types/dil/parser/unfinished.d.ts +22 -0
  40. package/dist/types/dil/parser/vocabulary.d.ts +12 -0
  41. package/dist/types/dil/render-error.d.ts +47 -0
  42. package/dist/types/dil/renderer-environment.d.ts +19 -8
  43. package/dist/types/dil/runtime/document.d.ts +18 -6
  44. package/dist/types/dil/runtime/execution-queue.d.ts +2 -1
  45. package/dist/types/dil/runtime/expressions.d.ts +8 -5
  46. package/dist/types/dil/runtime/inline-worker.d.ts +33 -0
  47. package/dist/types/dil/runtime/view-cost.d.ts +2 -2
  48. package/dist/types/dil/styled-renderer.d.ts +39 -0
  49. package/dist/types/dil/view/conditional-view.d.ts +3 -3
  50. package/dist/types/dil/view/markdown-node.d.ts +3 -3
  51. package/dist/types/dil/view/node-children.d.ts +3 -3
  52. package/dist/types/dil/view/node-view.d.ts +2 -2
  53. package/dist/types/dil/view/progressive-reveal.d.ts +5 -4
  54. package/dist/types/dil/view/render-boundary.d.ts +13 -0
  55. package/dist/types/dil/view/render-limit.d.ts +1 -1
  56. package/dist/types/dil/view/repeated-nodes.d.ts +4 -4
  57. package/dist/types/dil/view/reveal/controller.d.ts +9 -2
  58. package/dist/types/dil/view/reveal/presentation.d.ts +1 -1
  59. package/dist/types/dil/view/scroll/controller.d.ts +16 -2
  60. package/dist/types/dil/view/scroll/host-viewport.d.ts +24 -0
  61. package/dist/types/dil/view/scroll/root-tracker.d.ts +17 -0
  62. package/dist/types/dil/view/scroll/scroll-root.d.ts +36 -0
  63. package/dist/types/dil/view/scroll-options.d.ts +15 -0
  64. package/dist/types/dil/view/stream-follow.d.ts +10 -3
  65. package/dist/types/dil/view/table-context.d.ts +1 -1
  66. package/dist/types/dil/view/virtual-flow.d.ts +3 -3
  67. package/dist/types/dil/widgets/action-feedback.d.ts +1 -1
  68. package/dist/types/dil/widgets/charts/chart-hover.d.ts +17 -0
  69. package/dist/types/dil/widgets/charts/chart-legend.d.ts +1 -1
  70. package/dist/types/dil/widgets/charts/chart-pie.d.ts +16 -0
  71. package/dist/types/dil/widgets/charts/chart-series.d.ts +10 -2
  72. package/dist/types/dil/widgets/charts/chart-snapping.d.ts +3 -5
  73. package/dist/types/dil/widgets/charts/snap-cursor.d.ts +3 -7
  74. package/dist/types/dil/widgets/charts/snap-tooltip.d.ts +6 -4
  75. package/dist/types/dil/widgets/code-block.d.ts +1 -1
  76. package/dist/types/dil/widgets/controls.d.ts +2 -2
  77. package/dist/types/dil/widgets/graphs/node-graph.d.ts +1 -1
  78. package/dist/types/dil/widgets/graphs/service-node.d.ts +1 -1
  79. package/dist/types/dil/widgets/primitives/primitive.d.ts +4 -4
  80. package/dist/types/index.d.ts +9 -8
  81. package/dist/types/ui.d.ts +11 -8
  82. package/dist/ui.js +1 -1
  83. package/package.json +13 -2
  84. package/styles/tailwind.css +53 -1
  85. package/styles/tokens.css +3 -0
  86. package/dist/chunk-ZWAN2JCV.js +0 -2
  87. package/dist/runtime/vm.js +0 -6
  88. package/dist/shadow-renderer-F25KL3C4.js +0 -2363
package/dist/runtime/frame.html CHANGED
@@ -1,4 +1,4 @@
1
- <!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'sha256-RzRtmmIfXrOzkFYJOu/xG0sBcmTEHlB+f92GyNS8HaA=' 'strict-dynamic' 'wasm-unsafe-eval'; style-src 'unsafe-inline'; worker-src blob:; child-src blob:; connect-src 'none'; img-src data:; font-src data:; base-uri 'none'; form-action 'none'; object-src 'none'"><meta name="referrer" content="no-referrer"><style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
1
+ <!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'sha256-C9tdTTAG2NG4zUHJTcdE/94lRbU3/sT+l1sAPOJM5DY=' 'strict-dynamic' 'wasm-unsafe-eval'; style-src 'unsafe-inline'; worker-src blob:; child-src blob:; connect-src 'none'; img-src data:; font-src data:; base-uri 'none'; form-action 'none'; object-src 'none'"><meta name="referrer" content="no-referrer"><style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  .dil-scope, .dil-scope {
4
4
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
@@ -317,6 +317,9 @@
317
317
  :where(.dil-scope) .animate-pulse {
318
318
  animation: var(--animate-pulse);
319
319
  }
320
+ :where(.dil-scope) .cursor-default {
321
+ cursor: default;
322
+ }
320
323
  :where(.dil-scope) .cursor-pointer {
321
324
  cursor: pointer;
322
325
  }
@@ -413,6 +416,9 @@
413
416
  :where(.dil-scope) .rounded-none {
414
417
  border-radius: 0;
415
418
  }
419
+ :where(.dil-scope) .rounded-sm {
420
+ border-radius: calc(var(--radius) - 4px);
421
+ }
416
422
  :where(.dil-scope) .rounded-xl {
417
423
  border-radius: calc(var(--radius) + 4px);
418
424
  }
@@ -572,12 +578,18 @@
572
578
  :where(.dil-scope) .pt-4 {
573
579
  padding-top: calc(var(--spacing) * 4);
574
580
  }
581
+ :where(.dil-scope) .pr-2 {
582
+ padding-right: calc(var(--spacing) * 2);
583
+ }
575
584
  :where(.dil-scope) .pb-3 {
576
585
  padding-bottom: calc(var(--spacing) * 3);
577
586
  }
578
587
  :where(.dil-scope) .pl-4 {
579
588
  padding-left: calc(var(--spacing) * 4);
580
589
  }
590
+ :where(.dil-scope) .pl-8 {
591
+ padding-left: calc(var(--spacing) * 8);
592
+ }
581
593
  :where(.dil-scope) .text-left {
582
594
  text-align: left;
583
595
  }
@@ -648,6 +660,9 @@
648
660
  :where(.dil-scope) .text-white {
649
661
  color: var(--color-white);
650
662
  }
663
+ :where(.dil-scope) .lowercase {
664
+ text-transform: lowercase;
665
+ }
651
666
  :where(.dil-scope) .tabular-nums {
652
667
  --tw-numeric-spacing: tabular-nums;
653
668
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -655,6 +670,9 @@
655
670
  :where(.dil-scope) .line-through {
656
671
  text-decoration-line: line-through;
657
672
  }
673
+ :where(.dil-scope) .underline {
674
+ text-decoration-line: underline;
675
+ }
658
676
  :where(.dil-scope) .underline-offset-4 {
659
677
  text-underline-offset: 4px;
660
678
  }
@@ -917,9 +935,15 @@
917
935
  --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
918
936
  }
919
937
  }
938
+ :where(.dil-scope) .data-\[disabled\]\:pointer-events-none[data-disabled] {
939
+ pointer-events: none;
940
+ }
920
941
  :where(.dil-scope) .data-\[disabled\]\:opacity-50[data-disabled] {
921
942
  opacity: 50%;
922
943
  }
944
+ :where(.dil-scope) .data-\[highlighted\]\:bg-accent[data-highlighted] {
945
+ background-color: var(--accent);
946
+ }
923
947
  :where(.dil-scope) .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
924
948
  height: calc(var(--spacing) * 1.5);
925
949
  }
@@ -953,6 +977,16 @@
953
977
  :where(.dil-scope) .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
954
978
  flex-direction: column;
955
979
  }
980
+ :where(.dil-scope) .data-\[size\=sm\]\:px-2[data-size="sm"] {
981
+ padding-inline: calc(var(--spacing) * 2);
982
+ }
983
+ :where(.dil-scope) .data-\[state\=active\]\:bg-background[data-state="active"] {
984
+ background-color: var(--background);
985
+ }
986
+ :where(.dil-scope) .data-\[state\=active\]\:shadow-sm[data-state="active"] {
987
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
988
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
989
+ }
956
990
  :where(.dil-scope) .data-\[state\=checked\]\:border-primary[data-state="checked"] {
957
991
  border-color: var(--primary);
958
992
  }
@@ -988,60 +1022,54 @@
988
1022
  line-height: var(--tw-leading, var(--text-sm--line-height));
989
1023
  }
990
1024
  }
991
- @media (prefers-color-scheme: dark) {
992
- :where(.dil-scope) .dark\:border-input {
993
- border-color: var(--input);
994
- }
995
- :where(.dil-scope) .dark\:bg-destructive\/60 {
996
- background-color: var(--destructive);
1025
+ .dil-dark\:border-input:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
1026
+ border-color: var(--input);
1027
+ }
1028
+ .dil-dark\:bg-destructive\/60:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
1029
+ background-color: var(--destructive);
1030
+ @supports (color: color-mix(in lab, red, red)) {
1031
+ background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
997
1032
  }
1033
+ }
1034
+ .dil-dark\:bg-input\/30:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *) {
1035
+ background-color: var(--input);
998
1036
  @supports (color: color-mix(in lab, red, red)) {
999
- :where(.dil-scope) .dark\:bg-destructive\/60 {
1000
- background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
1001
- }
1037
+ background-color: color-mix(in oklab, var(--input) 30%, transparent);
1002
1038
  }
1003
- :where(.dil-scope) .dark\:bg-input\/30 {
1004
- background-color: var(--input);
1039
+ }
1040
+ @media (hover: hover) {
1041
+ .dil-dark\:hover\:bg-accent\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
1042
+ background-color: var(--accent);
1005
1043
  }
1006
1044
  @supports (color: color-mix(in lab, red, red)) {
1007
- :where(.dil-scope) .dark\:bg-input\/30 {
1008
- background-color: color-mix(in oklab, var(--input) 30%, transparent);
1045
+ .dil-dark\:hover\:bg-accent\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
1046
+ background-color: color-mix(in oklab, var(--accent) 50%, transparent);
1009
1047
  }
1010
1048
  }
1011
- @media (hover: hover) {
1012
- :where(.dil-scope) .dark\:hover\:bg-accent\/50:hover {
1013
- background-color: var(--accent);
1014
- }
1015
- @supports (color: color-mix(in lab, red, red)) {
1016
- :where(.dil-scope) .dark\:hover\:bg-accent\/50:hover {
1017
- background-color: color-mix(in oklab, var(--accent) 50%, transparent);
1018
- }
1019
- }
1020
- :where(.dil-scope) .dark\:hover\:bg-input\/50:hover {
1021
- background-color: var(--input);
1022
- }
1023
- @supports (color: color-mix(in lab, red, red)) {
1024
- :where(.dil-scope) .dark\:hover\:bg-input\/50:hover {
1025
- background-color: color-mix(in oklab, var(--input) 50%, transparent);
1026
- }
1027
- }
1049
+ .dil-dark\:hover\:bg-input\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
1050
+ background-color: var(--input);
1028
1051
  }
1029
- :where(.dil-scope) .dark\:focus-visible\:ring-destructive\/40:focus-visible {
1030
- --tw-ring-color: var(--destructive);
1031
- @supports (color: color-mix(in lab, red, red)) {
1032
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1052
+ @supports (color: color-mix(in lab, red, red)) {
1053
+ .dil-dark\:hover\:bg-input\/50:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):hover {
1054
+ background-color: color-mix(in oklab, var(--input) 50%, transparent);
1033
1055
  }
1034
1056
  }
1035
- :where(.dil-scope) .dark\:aria-invalid\:ring-destructive\/40[aria-invalid="true"] {
1036
- --tw-ring-color: var(--destructive);
1037
- @supports (color: color-mix(in lab, red, red)) {
1038
- --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1039
- }
1057
+ }
1058
+ .dil-dark\:focus-visible\:ring-destructive\/40:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *):focus-visible {
1059
+ --tw-ring-color: var(--destructive);
1060
+ @supports (color: color-mix(in lab, red, red)) {
1061
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1040
1062
  }
1041
- :where(.dil-scope) .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"] {
1042
- background-color: var(--primary);
1063
+ }
1064
+ .dil-dark\:aria-invalid\:ring-destructive\/40:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *)[aria-invalid="true"] {
1065
+ --tw-ring-color: var(--destructive);
1066
+ @supports (color: color-mix(in lab, red, red)) {
1067
+ --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
1043
1068
  }
1044
1069
  }
1070
+ .dil-dark\:data-\[state\=checked\]\:bg-primary:where(.dil-scope[data-theme="dark"], .dil-scope[data-theme="dark"] *)[data-state="checked"] {
1071
+ background-color: var(--primary);
1072
+ }
1045
1073
  :where(.dil-scope) .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
1046
1074
  fill: var(--muted-foreground);
1047
1075
  }
@@ -1732,6 +1760,9 @@
1732
1760
  --dil-item-radius: 8px;
1733
1761
  --dil-success: #22825e;
1734
1762
  --dil-warning: #ad751a;
1763
+ --dil-success-surface: #e5f5ee;
1764
+ --dil-warning-surface: #fff2d9;
1765
+ --dil-danger-surface: #fee8e8;
1735
1766
  --dil-tertiary: #8f8f8f;
1736
1767
  --dil-node-selected: #343d75;
1737
1768
  --dil-node-surface: #2a303b;
@@ -1772,6 +1803,9 @@
1772
1803
  --chart-5: #d78675;
1773
1804
  }
1774
1805
  @layer base {
1806
+ .dil-scope {
1807
+ position: relative;
1808
+ }
1775
1809
  .dil-scope *,
1776
1810
  .dil-scope *::before,
1777
1811
  .dil-scope *::after {
@@ -1784,8 +1818,13 @@
1784
1818
  .dil-scope p {
1785
1819
  margin: 0;
1786
1820
  }
1821
+ .dil-scope :is(button, input, select, textarea) {
1822
+ color: inherit;
1823
+ background-color: transparent;
1824
+ }
1787
1825
  }
1788
1826
  .dil-scope {
1827
+ color-scheme: light;
1789
1828
  background: var(--background);
1790
1829
  color: var(--foreground);
1791
1830
  font-family: var(--font-dil);
@@ -1802,6 +1841,7 @@
1802
1841
  font: inherit;
1803
1842
  }
1804
1843
  .dil-scope[data-theme="dark"] {
1844
+ color-scheme: dark;
1805
1845
  --background: #171717;
1806
1846
  --foreground: #fafafa;
1807
1847
  --dil-text-color: #fafafa;
@@ -1820,6 +1860,11 @@
1820
1860
  --accent-foreground: #fafafa;
1821
1861
  --border: #454545;
1822
1862
  --input: #505050;
1863
+ --dil-success: #5cc59a;
1864
+ --dil-warning: #e2ad55;
1865
+ --dil-success-surface: #1d3a2f;
1866
+ --dil-warning-surface: #3d3020;
1867
+ --dil-danger-surface: #432526;
1823
1868
  }
1824
1869
  :where(.dil-scope) .dil-document {
1825
1870
  overflow-wrap: anywhere;
@@ -1847,6 +1892,28 @@
1847
1892
  :where(.dil-scope) .dil-markdown strong {
1848
1893
  font-weight: 600;
1849
1894
  }
1895
+ :where(.dil-scope) .dil-markdown :where(ul, ol) {
1896
+ margin-block: 1em;
1897
+ padding-inline-start: 40px;
1898
+ }
1899
+ :where(.dil-scope) .dil-markdown :where(ul, ol) :where(ul, ol) {
1900
+ margin-block: 0;
1901
+ }
1902
+ :where(.dil-scope) .dil-markdown ul {
1903
+ list-style-type: disc;
1904
+ }
1905
+ :where(.dil-scope) .dil-markdown :where(ul, ol) ul {
1906
+ list-style-type: circle;
1907
+ }
1908
+ :where(.dil-scope) .dil-markdown :where(ul, ol) :where(ul, ol) ul {
1909
+ list-style-type: square;
1910
+ }
1911
+ :where(.dil-scope) .dil-markdown ol {
1912
+ list-style-type: decimal;
1913
+ }
1914
+ :where(.dil-scope) .dil-markdown blockquote {
1915
+ margin: 1em 40px;
1916
+ }
1850
1917
  :where(.dil-scope) .dil-markdown table {
1851
1918
  width: 100%;
1852
1919
  border-collapse: collapse;
@@ -1937,7 +2004,6 @@
1937
2004
  }
1938
2005
  :where(.dil-scope) .dil-legend-item[data-hidden="true"] {
1939
2006
  opacity: 0.45;
1940
- text-decoration: line-through;
1941
2007
  }
1942
2008
  :where(.dil-scope) .dil-legend-swatch {
1943
2009
  width: 11px;
@@ -1948,6 +2014,10 @@
1948
2014
  :where(.dil-scope) .dil-chart-series {
1949
2015
  transition: opacity 150ms ease;
1950
2016
  }
2017
+ :where(.dil-scope) .dil-chart-pie:has(.dil-chart-series:hover, .dil-chart-series:focus-visible)
2018
+ .dil-chart-series:not(:hover, :focus-visible) {
2019
+ opacity: 0.625;
2020
+ }
1951
2021
  :where(.dil-scope) .dil-tooltip {
1952
2022
  z-index: 60;
1953
2023
  max-width: min(24rem, calc(100vw - 16px));
@@ -1962,6 +2032,9 @@
1962
2032
  :where(.dil-scope) .dil-snap-tooltip {
1963
2033
  pointer-events: none;
1964
2034
  }
2035
+ :where(.dil-scope) .dil-snap-tooltip [data-emphasized="true"] span {
2036
+ font-weight: 700;
2037
+ }
1965
2038
  :where(.dil-scope) .dil-code-block textarea {
1966
2039
  font-family: var(--font-mono, monospace);
1967
2040
  font-size: var(--text-xs, 0.75rem);
@@ -2359,4 +2432,4 @@
2359
2432
  }
2360
2433
  }
2361
2434
  }
2362
- </style></head><body style="margin:0"><div id="root"></div><script>const script=document.createElement("script");script.src=new URL("./frame.js",location.href).href;document.head.append(script);</script></body></html>
2435
+ </style></head><body style="margin:0"><div id="root"></div><script>{let status="dil-loading";const ping=()=>parent.postMessage({type:status},"*");ping();const timer=setInterval(ping,1000);const script=document.createElement("script");script.src=new URL("./frame.js",location.href).href;script.onload=()=>clearInterval(timer);script.onerror=()=>{status="dil-failed";ping()};document.head.append(script)}</script></body></html>