@ag2/weave 0.1.0 → 0.2.0

package/dist/style.css

@@ -2209,4 +2209,549 @@
   max-height: 100vh;
   z-index: var(--_1s7qa7e2e);
   pointer-events: none;
+}._1f7zc2n1 {
+  background-color: var(--_19in3xh0);
+  border-color: var(--_19in3xh3);
+  outline-color: var(--_19in3xh3);
+  color: var(--_19in3xh4);
+}
+button._1f7zc2n1[aria-pressed=true] {
+  background-color: var(--_19in3xh2);
+}
+button._1f7zc2n1:hover, ._1f7zc2n1:focus-visible {
+  background-color: var(--_19in3xh1);
+}
+button._1f7zc2n1:active {
+  background-color: var(--_19in3xh2);
+}
+button._1f7zc2n1[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n2 {
+  background-color: var(--_19in3xh5);
+  border-color: var(--_19in3xh8);
+  outline-color: var(--_19in3xh8);
+  color: var(--_19in3xh9);
+}
+button._1f7zc2n2[aria-pressed=true] {
+  background-color: var(--_19in3xh7);
+}
+button._1f7zc2n2:hover, ._1f7zc2n2:focus-visible {
+  background-color: var(--_19in3xh6);
+}
+button._1f7zc2n2:active {
+  background-color: var(--_19in3xh7);
+}
+button._1f7zc2n2[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n3 {
+  background-color: var(--_19in3xha);
+  border-color: var(--_19in3xhd);
+  outline-color: var(--_19in3xhd);
+  color: var(--_19in3xhe);
+}
+button._1f7zc2n3[aria-pressed=true] {
+  background-color: var(--_19in3xhc);
+}
+button._1f7zc2n3:hover, ._1f7zc2n3:focus-visible {
+  background-color: var(--_19in3xhb);
+}
+button._1f7zc2n3:active {
+  background-color: var(--_19in3xhc);
+}
+button._1f7zc2n3[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n4 {
+  background-color: var(--_19in3xhk);
+  border-color: var(--_19in3xhn);
+  outline-color: var(--_19in3xhn);
+  color: var(--_19in3xho);
+}
+button._1f7zc2n4[aria-pressed=true] {
+  background-color: var(--_19in3xhm);
+}
+button._1f7zc2n4:hover, ._1f7zc2n4:focus-visible {
+  background-color: var(--_19in3xhl);
+}
+button._1f7zc2n4:active {
+  background-color: var(--_19in3xhm);
+}
+button._1f7zc2n4[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n5 {
+  background-color: var(--_19in3xhu);
+  border-color: var(--_19in3xhx);
+  outline-color: var(--_19in3xhx);
+  color: var(--_19in3xhy);
+}
+button._1f7zc2n5[aria-pressed=true] {
+  background-color: var(--_19in3xhw);
+}
+button._1f7zc2n5:hover, ._1f7zc2n5:focus-visible {
+  background-color: var(--_19in3xhv);
+}
+button._1f7zc2n5:active {
+  background-color: var(--_19in3xhw);
+}
+button._1f7zc2n5[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n6 {
+  background-color: var(--_19in3xh14);
+  border-color: var(--_19in3xh17);
+  outline-color: var(--_19in3xh17);
+  color: var(--_19in3xh18);
+}
+button._1f7zc2n6[aria-pressed=true] {
+  background-color: var(--_19in3xh16);
+}
+button._1f7zc2n6:hover, ._1f7zc2n6:focus-visible {
+  background-color: var(--_19in3xh15);
+}
+button._1f7zc2n6:active {
+  background-color: var(--_19in3xh16);
+}
+button._1f7zc2n6[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n7 {
+  background-color: var(--_19in3xh1e);
+  border-color: var(--_19in3xh1h);
+  outline-color: var(--_19in3xh1h);
+  color: var(--_19in3xh1i);
+}
+button._1f7zc2n7[aria-pressed=true] {
+  background-color: var(--_19in3xh1g);
+}
+button._1f7zc2n7:hover, ._1f7zc2n7:focus-visible {
+  background-color: var(--_19in3xh1f);
+}
+button._1f7zc2n7:active {
+  background-color: var(--_19in3xh1g);
+}
+button._1f7zc2n7[disabled] {
+  opacity: var(--_1s7qa7e33);
+}
+._1f7zc2n8 {
+  background-color: var(--_19in3xh1o);
+  border-color: var(--_19in3xh1r);
+  outline-color: var(--_19in3xh1r);
+  color: var(--_19in3xh1s);
+}
+button._1f7zc2n8[aria-pressed=true] {
+  background-color: var(--_19in3xh1q);
+}
+button._1f7zc2n8:hover, ._1f7zc2n8:focus-visible {
+  background-color: var(--_19in3xh1p);
+}
+button._1f7zc2n8:active {
+  background-color: var(--_19in3xh1q);
+}
+button._1f7zc2n8[disabled] {
+  opacity: var(--_1s7qa7e33);
+}.nwqdf42 {
+  --nwqdf40: 0;
+  border-style: solid;
+  border-width: var(--nwqdf40);
+}
+.nwqdf42:first-child, :not(.nwqdf42) + .nwqdf42 {
+  border-top-left-radius: var(--nwqdf41);
+  border-top-right-radius: var(--nwqdf41);
+}
+.nwqdf42:last-child, .nwqdf42:not(:has(+.nwqdf42)) {
+  border-bottom-left-radius: var(--nwqdf41);
+  border-bottom-right-radius: var(--nwqdf41);
+}
+.nwqdf42[data-first-child="true"] {
+  border-top-left-radius: var(--nwqdf41);
+  border-top-right-radius: var(--nwqdf41);
+}
+.nwqdf42[data-first-child="false"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.nwqdf42[data-last-child="true"] {
+  border-bottom-left-radius: var(--nwqdf41);
+  border-bottom-right-radius: var(--nwqdf41);
+}
+.nwqdf42[data-last-child="false"] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+button.nwqdf42 {
+  cursor: pointer;
+}
+.nwqdf43 {
+  --nwqdf41: var(--_1s7qa7e1y);
+}
+.nwqdf44 {
+  --nwqdf41: var(--_1s7qa7e1z);
+}
+.nwqdf45 {
+  --nwqdf41: var(--_1s7qa7e20);
+}
+.nwqdf46 {
+  --nwqdf41: var(--_1s7qa7e21);
+}
+.nwqdf47 {
+  --nwqdf40: var(--_1s7qa7e25);
+}
+.nwqdf48 {
+  border-bottom-width: 0;
+}
+.nwqdf48:last-child, .nwqdf48:not(:has(+.nwqdf48)) {
+  border-bottom-width: var(--nwqdf40);
+}._1o5czkz0 {
+  word-break: break-word;
+}
+._1o5czkz1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+._1o5czkz2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}._550r4h0 {
+  border-radius: var(--_1s7qa7e1z);
+  border-width: var(--_1s7qa7e25);
+  overflow: hidden;
+}.t54ly40 {
+  padding: var(--_1s7qa7e1s);
+  border-radius: var(--_1s7qa7e1z);
+  border-width: var(--_1s7qa7e25);
+}.jbpukc0 {
+  width: 3rem;
+  background-color: var(--_19in3xh0);
+  display: flex;
+  flex-direction: column;
+  color: var(--_19in3xh4);
+}
+.jbpukc1 {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--_1s7qa7e1t);
+  padding: var(--_1s7qa7e1t) 0;
+}
+.jbpukc3 {
+  --jbpukc2: -0.5rem;
+}
+.jbpukc3[data-inside-folder=true] {
+  --jbpukc2: -0.375rem;
+}
+.jbpukc3[data-drop-child=true] {
+  outline: var(--_1s7qa7e29) solid var(--_19in3xhz);
+  border-radius: var(--_1s7qa7e20);
+}
+.jbpukc3[data-drop-above=true]::after, .jbpukc3[data-drop-below=true]::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0rem;
+  width: 100%;
+  height: var(--_1s7qa7e29);
+  background-color: var(--_19in3xhz);
+}
+.jbpukc3[data-drop-above=true]::after {
+  top: var(--jbpukc2);
+}
+.jbpukc3[data-drop-below=true]::after {
+  bottom: var(--jbpukc2);
+}
+.jbpukc4 {
+  min-width: 2.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
+}
+.jbpukc4:hover {
+  transform: translateX(0.125rem);
+}
+.jbpukc4::before {
+  content: "";
+  display: none;
+  position: absolute;
+  left: -0.8438rem;
+  width: 0.3125rem;
+  height: 1rem;
+  border-radius: 0 0.25rem 0.25rem 0;
+  background: CurrentColor;
+  transition: height 200ms linear;
+}
+.jbpukc4:hover::before {
+  display: block;
+  width: 0.1875rem;
+}
+.jbpukc5::before {
+  display: block;
+  height: 1.5rem;
+}
+.jbpukc5:hover::before {
+  width: 0.3125rem;
+}
+.jbpukc6 {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  line-height: 0;
+}
+.jbpukc7 {
+  top: -0.375rem;
+  left: -0.375rem;
+}
+.jbpukc8 {
+  top: -0.125rem;
+  left: -0.125rem;
+}
+button.jbpukc9 {
+  cursor: pointer;
+}
+.jbpukca {
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.625rem;
+  line-height: var(--_1s7qa7et);
+  letter-spacing: var(--_1s7qa7e1a);
+}
+.jbpukcb {
+  width: 2.125rem;
+  height: 2.125rem;
+}
+.jbpukcc {
+  width: 2.125rem;
+  height: 2.125rem;
+}
+.jbpukcd {
+  border: var(--_1s7qa7e25) solid var(--_19in3xh3);
+}
+.jbpukce {
+  padding: var(--_1s7qa7e1r);
+  width: 2.125rem;
+  min-height: 2.125rem;
+  display: flex;
+  flex-wrap: wrap;
+  outline: var(--_1s7qa7e25) solid var(--_19in3xh3);
+  position: relative;
+}
+button.jbpukce {
+  cursor: pointer;
+}
+.jbpukcf {
+  gap: 0.125rem;
+  border-radius: var(--_1s7qa7e20);
+}
+.jbpukcg {
+  padding-left: 0;
+  padding-right: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--_1s7qa7e1s);
+  border-radius: var(--_1s7qa7e21);
+}
+.jbpukch {
+  width: 100%;
+  height: 0.5rem;
+  position: absolute;
+  left: 0;
+}
+.jbpukci {
+  top: -0.25rem;
+}
+.jbpukcj {
+  bottom: -0.25rem;
+}@keyframes _1xj9jyp0 {
+  to {
+    opacity: 0.4;
+    transform: translateY(-15%);
+  }
+}
+._1xj9jyp1 {
+  display: inline-block;
+  background-color: currentColor;
+  border-radius: 50%;
+  transform: translateY(15%);
+}
+._1xj9jyp2 {
+  animation: _1xj9jyp0 0.6s infinite alternate;
+}
+._1xj9jyp3 {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+._1xj9jyp4 {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+._1xj9jyp5 {
+  animation-delay: 0s;
+}
+._1xj9jyp6 {
+  animation-delay: 0.2s;
+}
+._1xj9jyp7 {
+  animation-delay: 0.4s;
+}._7lp3ua0 {
+  background-color: var(--_19in3xh5);
+  outline-style: solid;
+}
+._7lp3ua0:first-child {
+  margin-left: 0;
+}
+button._7lp3ua0 {
+  cursor: pointer;
+}
+._7lp3ua1 {
+  margin-left: -0.375rem;
+  outline-width: var(--_1s7qa7e25);
+}
+._7lp3ua2 {
+  margin-left: -0.5625rem;
+  outline-width: var(--_1s7qa7e26);
+}
+._7lp3ua3 {
+  margin-left: -0.6563rem;
+  outline-width: var(--_1s7qa7e27);
+}
+._7lp3ua4 {
+  margin-left: -0.8125rem;
+  outline-width: var(--_1s7qa7e28);
+}
+._7lp3ua5 {
+  outline-color: var(--_19in3xh0);
+}
+._7lp3ua6 {
+  outline-color: var(--_19in3xh5);
+}
+._7lp3ua7 {
+  outline-color: var(--_19in3xha);
+}
+._7lp3ua8 {
+  outline-color: var(--_19in3xhk);
+}
+._7lp3ua9 {
+  outline-color: var(--_19in3xhu);
+}
+._7lp3uaa {
+  outline-color: var(--_19in3xh14);
+}
+._7lp3uab {
+  outline-color: var(--_19in3xh1e);
+}
+._7lp3uac {
+  outline-color: var(--_19in3xh1o);
+}._4j0z2c0 {
+  position: relative;
+  isolation: isolate;
+}
+._4j0z2c1 {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  color: var(--_19in3xh4);
+  pointer-events: none;
+}.wf38060 {
+  min-height: 100%;
+  background-color: var(--_19in3xh0);
+  color: var(--_19in3xh4);
+}
+.wf38061 {
+  padding: var(--_1s7qa7e1u);
+}._18hg0vg0 {
+  width: 11.875rem;
+}
+._18hg0vg1 {
+  width: 13.875rem;
+}
+._18hg0vg2 {
+  width: 16rem;
+}
+._18hg0vg3 {
+  position: absolute;
+  top: 0;
+  right: -0.1875rem;
+  width: 0.375rem;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 2;
+}
+._18hg0vg3:hover, ._18hg0vg3[data-resizing=true] {
+  background-color: var(--_19in3xh3);
+}
+._18hg0vg4 {
+  padding: 0.3125rem var(--_1s7qa7e1s) 0.3125rem var(--_1s7qa7e1t);
+  min-height: 3.625rem;
+  flex-shrink: 0;
+}
+button._18hg0vg4 {
+  cursor: pointer;
+}
+button._18hg0vg4[aria-pressed=true] {
+  background-color: var(--_19in3xh2);
+}
+button._18hg0vg4:hover, button._18hg0vg4:focus-visible {
+  background-color: var(--_19in3xh1);
+}
+button._18hg0vg4:active {
+  background-color: var(--_19in3xh2);
+}
+._18hg0vg5 {
+  border-bottom-width: 1px;
+}
+._18hg0vg6 {
+  min-height: 100%;
+  padding: var(--_1s7qa7e1s);
+  padding-right: 0;
+  padding-bottom: var(--_1s7qa7e1x);
+}
+._18hg0vg7 {
+  padding-left: var(--_1s7qa7e1u);
+  padding-right: var(--_1s7qa7e1s);
+}
+._18hg0vg8 {
+  height: 3rem;
+}
+._18hg0vg9 {
+  padding-left: var(--_1s7qa7e1s);
+}
+._18hg0vga {
+  border-bottom-width: var(--_1s7qa7e25);
+}
+._18hg0vgb {
+  padding-top: var(--_1s7qa7e1u);
+  padding-left: var(--_1s7qa7e1u);
+  padding-right: 0;
+  padding-bottom: 6.25rem;
+}
+._18hg0vgc {
+  padding: var(--_1s7qa7e1u);
+  border-radius: var(--_1s7qa7e20);
+  min-height: 28.125rem;
+}
+._18hg0vgd {
+  padding: var(--_1s7qa7e1u);
+  border-radius: var(--_1s7qa7e20);
+}
+._18hg0vge {
+  padding: 40px 0;
+  max-width: 29.125rem;
+  width: 100%;
+  margin: auto;
+}
+._18hg0vgf {
+  max-width: 60.25rem;
+  width: 100%;
+  margin: auto;
 }

package/dist/styles/ContainerColor.css.d.ts

@@ -0,0 +1,15 @@
+import { ComplexStyleRule } from "@vanilla-extract/css";
+import { RecipeVariants } from "@vanilla-extract/recipes";
+export declare const ContainerColor: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        Background: ComplexStyleRule;
+        Surface: ComplexStyleRule;
+        SurfaceVariant: ComplexStyleRule;
+        Primary: ComplexStyleRule;
+        Secondary: ComplexStyleRule;
+        Success: ComplexStyleRule;
+        Warning: ComplexStyleRule;
+        Critical: ComplexStyleRule;
+    };
+}>;
+export declare type ContainerColorVariants = RecipeVariants<typeof ContainerColor>;

package/dist/styles/Text.css.d.ts

@@ -0,0 +1,3 @@
+export declare const BreakWord: string;
+export declare const LineClamp2: string;
+export declare const LineClamp3: string;

package/dist/utils/dragOverlay.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A full-viewport transparent overlay held for the duration of a pointer drag.
+ *
+ * Two things only an overlay can do. A cursor set on `body` is ignored wherever
+ * the pointer is over an element that declares its own — which is most of this
+ * app — so the resize cursor has to come from something that covers everything.
+ * And the overlay stops an embedded iframe from swallowing the move/up events,
+ * which otherwise leaves a divider stuck in drag mode.
+ *
+ * Returns the release function; call it from the same handler that removes the
+ * move/up listeners.
+ */
+export declare function beginDragOverlay(cursor: "col-resize" | "row-resize"): () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ag2/weave",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Ajay Bura (ajbura)",
   "license": "Apache-2.0",
   "main": "dist/index.js",