@poveste/app 0.20.0 → 0.21.0

package/dist/style.css

@@ -2,7 +2,7 @@
   /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
   @layer properties;
   .poveste-tooltip {
-    color: #fff;
+    color: var(--_poveste-white);
     z-index: 100;
     background: #000c;
     border-radius: 6px;
@@ -12,46 +12,112 @@
   .poveste-tooltip-arrow {
     fill: #000c;
   }
+  :where([class*=poveste-]) {
+    --_poveste-primary-50: var(--_poveste-color-primary-50,#ecfdf5);
+    --_poveste-primary-100: var(--_poveste-color-primary-100,#d1fae5);
+    --_poveste-primary-200: var(--_poveste-color-primary-200,#a7f3d0);
+    --_poveste-primary-300: var(--_poveste-color-primary-300,#6ee7b7);
+    --_poveste-primary-400: var(--_poveste-color-primary-400,#34d399);
+    --_poveste-primary-500: var(--_poveste-color-primary-500,#10b981);
+    --_poveste-primary-600: var(--_poveste-color-primary-600,#059669);
+    --_poveste-primary-700: var(--_poveste-color-primary-700,#047857);
+    --_poveste-primary-800: var(--_poveste-color-primary-800,#065f46);
+    --_poveste-primary-900: var(--_poveste-color-primary-900,#064e3b);
+    --_poveste-gray-50: var(--_poveste-color-gray-50,#fafafa);
+    --_poveste-gray-100: var(--_poveste-color-gray-100,#f4f4f5);
+    --_poveste-gray-200: var(--_poveste-color-gray-200,#e4e4e7);
+    --_poveste-gray-300: var(--_poveste-color-gray-300,#d4d4d8);
+    --_poveste-gray-400: var(--_poveste-color-gray-400,#a1a1aa);
+    --_poveste-gray-500: var(--_poveste-color-gray-500,#71717a);
+    --_poveste-gray-600: var(--_poveste-color-gray-600,#52525b);
+    --_poveste-gray-700: var(--_poveste-color-gray-700,#3f3f46);
+    --_poveste-gray-750: var(--_poveste-color-gray-750,#323238);
+    --_poveste-gray-800: var(--_poveste-color-gray-800,#27272a);
+    --_poveste-gray-850: var(--_poveste-color-gray-850,#1f1f21);
+    --_poveste-gray-900: var(--_poveste-color-gray-900,#18181b);
+    --_poveste-gray-950: var(--_poveste-color-gray-950,#101012);
+    --_poveste-radius-sm: .25rem;
+    --_poveste-radius: .375rem;
+    --_poveste-radius-md: .5rem;
+    --_poveste-radius-lg: .75rem;
+    --_poveste-radius-xl: 1rem;
+    --_poveste-radius-2xl: 1.5rem;
+    --_poveste-radius-3xl: 2rem;
+    --_poveste-white: #fff;
+    --_poveste-black: #000;
+    --_poveste-warning: oklch(70.5% .213 47.604);
+  }
+  .poveste-wrapper {
+    flex-wrap: wrap;
+    gap: .5rem;
+    padding: .5rem;
+    display: flex;
+  }
+  .poveste-wrapper:hover {
+    background-color: var(--_poveste-primary-100);
+  }
+  .poveste-wrapper:where(.ptw-dark,.ptw-dark *):hover {
+    background-color: var(--_poveste-primary-800);
+  }
+  .poveste-wrapper-title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
+    width: 7rem;
+    overflow: hidden;
+  }
+  .poveste-wrapper-body {
+    flex-grow: 1;
+    align-items: center;
+    gap: .25rem;
+    max-width: 100%;
+    display: flex;
+  }
+  .poveste-wrapper-control {
+    flex-grow: 1;
+    max-width: 100%;
+    display: block;
+  }
   .poveste-button {
-    --_poveste-button-surface: var(--color-gray-200);
-    --_poveste-button-surface-hover: var(--color-primary-200);
-    --_poveste-button-text: var(--color-gray-900);
-    border-radius: var(--radius-sm);
+    --_poveste-button-surface: var(--_poveste-gray-200);
+    --_poveste-button-surface-hover: var(--_poveste-primary-200);
+    --_poveste-button-text: var(--_poveste-gray-900);
+    border-radius: var(--_poveste-radius-sm);
     background: var(--_poveste-button-surface);
     color: var(--_poveste-button-text);
     cursor: pointer;
     border: none;
   }
   .poveste-button:where(.ptw-dark,.ptw-dark *) {
-    --_poveste-button-surface: var(--color-gray-750);
-    --_poveste-button-surface-hover: var(--color-primary-900);
-    --_poveste-button-text: var(--color-gray-100);
+    --_poveste-button-surface: var(--_poveste-gray-750);
+    --_poveste-button-surface-hover: var(--_poveste-primary-900);
+    --_poveste-button-text: var(--_poveste-gray-100);
   }
   .poveste-button:hover {
     background: var(--_poveste-button-surface-hover);
   }
   .poveste-button[data-color=primary] {
-    --_poveste-button-surface: var(--color-primary-500);
-    --_poveste-button-surface-hover: var(--color-primary-600);
-    --_poveste-button-text: var(--color-white);
+    --_poveste-button-surface: var(--_poveste-primary-500);
+    --_poveste-button-surface-hover: var(--_poveste-primary-600);
+    --_poveste-button-text: var(--_poveste-white);
   }
   .poveste-button[data-color=primary]:where(.ptw-dark,.ptw-dark *) {
-    --_poveste-button-surface: var(--color-primary-500);
-    --_poveste-button-surface-hover: var(--color-primary-600);
-    --_poveste-button-text: var(--color-black);
+    --_poveste-button-surface: var(--_poveste-primary-500);
+    --_poveste-button-surface-hover: var(--_poveste-primary-600);
+    --_poveste-button-text: var(--_poveste-black);
   }
   .poveste-button[data-color=flat] {
     --_poveste-button-surface: transparent;
-    --_poveste-button-surface-hover: var(--color-gray-500);
+    --_poveste-button-surface-hover: var(--_poveste-gray-500);
     @supports (color: color-mix(in lab, red, red)) {
-      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--_poveste-gray-500) 20%, transparent);
     }
   }
   .poveste-button[data-color=flat]:where(.ptw-dark,.ptw-dark *) {
     --_poveste-button-surface: transparent;
-    --_poveste-button-surface-hover: var(--color-gray-500);
+    --_poveste-button-surface-hover: var(--_poveste-gray-500);
     @supports (color: color-mix(in lab, red, red)) {
-      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--_poveste-gray-500) 20%, transparent);
     }
   }
   .poveste-button-group {
@@ -59,7 +125,7 @@
     align-items: center;
   }
   .poveste-button-group-options {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     border: 1px solid #00000040;
     gap: 1px;
     padding: 1px;
@@ -76,24 +142,24 @@
   }
   .poveste-button-group-option[data-state=off] {
     --_poveste-button-surface: transparent;
-    --_poveste-button-surface-hover: var(--color-gray-500);
+    --_poveste-button-surface-hover: var(--_poveste-gray-500);
     @supports (color: color-mix(in lab, red, red)) {
-      --_poveste-button-surface-hover: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+      --_poveste-button-surface-hover: color-mix(in oklab, var(--_poveste-gray-500) 20%, transparent);
     }
   }
   .poveste-button-group-option[data-state=on] {
-    --_poveste-button-surface: var(--color-primary-500);
-    --_poveste-button-surface-hover: var(--color-primary-600);
-    --_poveste-button-text: var(--color-white);
+    --_poveste-button-surface: var(--_poveste-primary-500);
+    --_poveste-button-surface-hover: var(--_poveste-primary-600);
+    --_poveste-button-text: var(--_poveste-white);
   }
   .poveste-button-group-option[data-state=on]:where(.ptw-dark,.ptw-dark *) {
-    --_poveste-button-text: var(--color-black);
+    --_poveste-button-text: var(--_poveste-black);
   }
   .poveste-simple-checkbox {
     box-sizing: border-box;
     width: 16px;
     height: 16px;
-    color: var(--color-white);
+    color: var(--_poveste-white);
     background: 0 0;
     border: 0;
     padding: 0;
@@ -101,7 +167,7 @@
     position: relative;
   }
   .poveste-simple-checkbox:focus-visible {
-    outline: 2px solid var(--color-primary-500);
+    outline: 2px solid var(--_poveste-primary-500);
     outline-offset: 2px;
   }
   .poveste-simple-checkbox-interactive {
@@ -114,7 +180,7 @@
   }
   .poveste-checkbox-visual-box {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     border: 1px solid #00000040;
     position: absolute;
     inset: 0;
@@ -128,7 +194,7 @@
     border-color: #ffffff40;
   }
   .poveste-simple-checkbox[data-checked] .poveste-checkbox-visual-box {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
     border-width: 8px;
   }
   @media (prefers-reduced-motion:no-preference) {
@@ -137,7 +203,7 @@
     }
   }
   .poveste-simple-checkbox:hover .poveste-checkbox-visual-box {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-simple-checkbox:active .poveste-checkbox-visual-box {
     background: #6b728033;
@@ -147,7 +213,7 @@
     position: relative;
   }
   .poveste-checkbox-visual-check path {
-    stroke: var(--color-white);
+    stroke: var(--_poveste-white);
     stroke-width: 2px;
   }
   @media (prefers-reduced-motion:no-preference) {
@@ -169,7 +235,7 @@
     display: block;
   }
   .poveste-checkbox-box:focus-visible {
-    outline: 2px solid var(--color-primary-500);
+    outline: 2px solid var(--_poveste-primary-500);
     outline-offset: 2px;
   }
   .poveste-checkbox-list {
@@ -193,12 +259,124 @@
     display: block;
   }
   .poveste-checkbox-list-box:focus-visible {
-    outline: 2px solid var(--color-primary-500);
+    outline: 2px solid var(--_poveste-primary-500);
     outline-offset: 2px;
   }
+  .poveste-color-select {
+    cursor: text;
+    align-items: center;
+  }
+  .poveste-color-select-fields {
+    gap: .25rem;
+    display: flex;
+  }
+  .poveste-color-select-input {
+    box-sizing: border-box;
+    border-radius: var(--_poveste-radius-sm);
+    width: 100%;
+    color: inherit;
+    background: 0 0;
+    border: 1px solid #00000040;
+    outline: none;
+    margin-block: -.25rem;
+    padding: .25rem .5rem;
+  }
+  .poveste-color-select-input:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .poveste-color-select-input:focus {
+    border-color: var(--_poveste-primary-500);
+  }
+  .poveste-copy-icon {
+    color: inherit;
+    opacity: .5;
+    cursor: pointer;
+    background: 0 0;
+    border: 0;
+    padding: 0;
+    display: flex;
+  }
+  .poveste-copy-icon:hover {
+    opacity: 1;
+    color: var(--_poveste-primary-500);
+  }
+  .poveste-copy-icon:focus-visible {
+    opacity: 1;
+  }
+  .poveste-copy-icon-glyph {
+    width: 1rem;
+    height: 1rem;
+  }
+  .poveste-color-shades {
+    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
+    gap: 1rem;
+    margin: 1rem;
+    display: grid;
+  }
+  .poveste-color-shades-swatch {
+    border-radius: 9999px;
+    width: 4rem;
+    height: 4rem;
+  }
+  .poveste-token-text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    margin-block: 0;
+    overflow: hidden;
+  }
+  .poveste-token-text[data-slot=value] {
+    opacity: .5;
+  }
+  .poveste-token-grid {
+    gap: 1rem;
+    margin: 1rem;
+    display: grid;
+  }
   .bind-col-size {
     grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
   }
+  .poveste-token-text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    margin-block: 0;
+    overflow: hidden;
+  }
+  .poveste-token-text[data-slot=value] {
+    opacity: .5;
+  }
+  .poveste-token-list {
+    flex-direction: column;
+    gap: .5rem;
+    margin-block: 2rem;
+    display: flex;
+  }
+  .poveste-token-list-labels {
+    margin-inline: 1rem;
+  }
+  .poveste-token-item {
+    flex-direction: column;
+    gap: .5rem;
+    display: flex;
+  }
+  .poveste-token-row {
+    gap: .25rem;
+    display: flex;
+  }
+  .poveste-token-text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    margin-block: 0;
+    overflow: hidden;
+  }
+  .poveste-token-text[data-slot=value] {
+    opacity: .5;
+  }
+  .poveste-token-copy {
+    flex: none;
+  }
   .poveste-number {
     cursor: ew-resize;
     align-items: center;
@@ -209,7 +387,7 @@
   }
   .poveste-number-input {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     color: inherit;
     cursor: ew-resize;
@@ -223,7 +401,7 @@
     border-color: #ffffff40;
   }
   .poveste-number-input:focus {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-radio {
     cursor: text;
@@ -259,14 +437,14 @@
     border-color: #ffffff40;
   }
   .poveste-radio-box:hover,.poveste-radio-box[data-state=checked] {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-radio-box:focus-visible {
-    outline: 2px solid var(--color-primary-500);
+    outline: 2px solid var(--_poveste-primary-500);
     outline-offset: 2px;
   }
   .poveste-radio-dot {
-    background: var(--color-primary-500);
+    background: var(--_poveste-primary-500);
     border-radius: 9999px;
     display: block;
     position: absolute;
@@ -287,7 +465,7 @@
     }
   }
   .poveste-select-trigger {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     height: 27px;
     color: inherit;
@@ -308,7 +486,7 @@
     border-color: #ffffff40;
   }
   .poveste-select-trigger:hover {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-select-label {
     white-space: nowrap;
@@ -334,17 +512,17 @@
   }
   .poveste-select-options {
     max-height: var(--reka-popover-content-available-height);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-sm);
-    background: var(--color-gray-50);
-    color: var(--color-gray-900);
+    border: 1px solid var(--_poveste-gray-200);
+    border-radius: var(--_poveste-radius-sm);
+    background: var(--_poveste-gray-50);
+    color: var(--_poveste-gray-900);
     overflow-y: auto;
     box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
   }
   .poveste-select-options:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-850);
-    background: var(--color-gray-700);
-    color: var(--color-gray-100);
+    border-color: var(--_poveste-gray-850);
+    background: var(--_poveste-gray-700);
+    color: var(--_poveste-gray-100);
   }
   .poveste-select-list {
     flex-direction: column;
@@ -359,16 +537,16 @@
     padding: .25rem .5rem;
   }
   .poveste-select-option[data-state=checked] {
-    background: var(--color-primary-200);
+    background: var(--_poveste-primary-200);
   }
   .poveste-select-option[data-state=checked]:where(.ptw-dark,.ptw-dark *) {
-    background: var(--color-primary-800);
+    background: var(--_poveste-primary-800);
   }
   .poveste-select-option[data-highlighted] {
-    background: var(--color-primary-100);
+    background: var(--_poveste-primary-100);
   }
   .poveste-select-option[data-highlighted]:where(.ptw-dark,.ptw-dark *) {
-    background: var(--color-primary-700);
+    background: var(--_poveste-primary-700);
   }
   @keyframes poveste-select-in {
     0% {
@@ -421,33 +599,33 @@
     width: var(--_poveste-slider-thumb);
     height: var(--_poveste-slider-thumb);
     appearance: none;
-    background: var(--color-white);
+    background: var(--_poveste-white);
     border: 1px solid #00000040;
     border-radius: 9999px;
   }
   .poveste-slider-input:where(.ptw-dark,.ptw-dark *)::-webkit-slider-thumb {
-    background: var(--color-gray-700);
+    background: var(--_poveste-gray-700);
     border-color: #ffffff40;
   }
   .poveste-slider-input:hover::-webkit-slider-thumb {
-    border-color: var(--color-primary-500);
-    background: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
+    background: var(--_poveste-primary-500);
   }
   .poveste-slider-input::-moz-range-thumb {
     width: var(--_poveste-slider-thumb);
     height: var(--_poveste-slider-thumb);
     appearance: none;
-    background: var(--color-white);
+    background: var(--_poveste-white);
     border: 1px solid #00000040;
     border-radius: 9999px;
   }
   .poveste-slider-input:where(.ptw-dark,.ptw-dark *)::-moz-range-thumb {
-    background: var(--color-gray-700);
+    background: var(--_poveste-gray-700);
     border-color: #ffffff40;
   }
   .poveste-slider-input:hover::-moz-range-thumb {
-    border-color: var(--color-primary-500);
-    background: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
+    background: var(--_poveste-primary-500);
   }
   .poveste-text {
     cursor: text;
@@ -455,7 +633,7 @@
   }
   .poveste-text-input {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     color: inherit;
     background: 0 0;
@@ -468,14 +646,14 @@
     border-color: #ffffff40;
   }
   .poveste-text-input:focus {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-textarea {
     cursor: text;
   }
   .poveste-textarea-input {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     min-height: 26px;
     color: inherit;
@@ -490,12 +668,43 @@
     border-color: #ffffff40;
   }
   .poveste-textarea-input:focus {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
-  .__poveste-json-code[data-v-4b978a74] .cm-editor {
+  .__poveste-json-code[data-v-57ba1b4e] .cm-editor {
     min-width: 280px;
     height: 100%;
   }
+  .poveste-json {
+    cursor: text;
+  }
+  .__poveste-json-code {
+    box-sizing: border-box;
+    resize: vertical;
+    border-radius: var(--_poveste-radius-sm);
+    border: 1px solid #00000040;
+    width: 100%;
+    height: 12rem;
+    min-height: 8rem;
+    position: relative;
+    overflow: auto;
+  }
+  .__poveste-json-code:where(.ptw-dark,.ptw-dark *) {
+    border-color: #ffffff40;
+  }
+  .__poveste-json-code:focus-within {
+    border-color: var(--_poveste-primary-500);
+  }
+  .poveste-json-invalid {
+    color: var(--_poveste-warning);
+    flex: none;
+  }
+  .poveste-json-read-only {
+    color: var(--_poveste-gray-500);
+    flex: none;
+  }
+  .poveste-json-read-only:where(.ptw-dark,.ptw-dark *) {
+    color: var(--_poveste-gray-400);
+  }
   .poveste-date {
     align-items: center;
   }
@@ -507,7 +716,7 @@
   }
   .poveste-date-field {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     border: 1px solid #00000040;
     align-items: center;
     gap: 1px;
@@ -520,15 +729,15 @@
     border-color: #ffffff40;
   }
   .poveste-date-field:focus-within {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-date-segment {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     padding-inline: .125rem;
   }
   .poveste-date-segment:focus {
-    background: var(--color-primary-500);
-    color: var(--color-white);
+    background: var(--_poveste-primary-500);
+    color: var(--_poveste-white);
     outline: none;
   }
   .poveste-date-segment[data-placeholder] {
@@ -549,7 +758,7 @@
   }
   .poveste-date-trigger:hover {
     opacity: 1;
-    color: var(--color-primary-500);
+    color: var(--_poveste-primary-500);
   }
   .poveste-date-icon {
     width: 1rem;
@@ -557,14 +766,14 @@
   }
   .poveste-date-calendar {
     z-index: 100;
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-sm);
-    background: var(--color-gray-50);
+    border: 1px solid var(--_poveste-gray-200);
+    border-radius: var(--_poveste-radius-sm);
+    background: var(--_poveste-gray-50);
     box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
   }
   .poveste-date-calendar:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-850);
-    background: var(--color-gray-700);
+    border-color: var(--_poveste-gray-850);
+    background: var(--_poveste-gray-700);
   }
   .poveste-date-calendar-body {
     padding: .5rem;
@@ -576,7 +785,7 @@
     display: flex;
   }
   .poveste-date-step {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     color: inherit;
     cursor: pointer;
     background: 0 0;
@@ -585,10 +794,10 @@
     display: flex;
   }
   .poveste-date-step:hover {
-    background: var(--color-primary-100);
+    background: var(--_poveste-primary-100);
   }
   .poveste-date-step:hover:where(.ptw-dark,.ptw-dark *) {
-    background: var(--color-primary-800);
+    background: var(--_poveste-primary-800);
   }
   .poveste-date-grid {
     border-collapse: collapse;
@@ -600,7 +809,7 @@
     font-weight: 400;
   }
   .poveste-date-day {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 1.75rem;
     height: 1.75rem;
     color: inherit;
@@ -615,18 +824,18 @@
     opacity: .3;
   }
   .poveste-date-day[data-today] {
-    color: var(--color-primary-500);
+    color: var(--_poveste-primary-500);
     font-weight: 700;
   }
   .poveste-date-day:hover:not([data-selected]) {
-    background: var(--color-primary-100);
+    background: var(--_poveste-primary-100);
   }
   .poveste-date-day:hover:not([data-selected]):where(.ptw-dark,.ptw-dark *) {
-    background: var(--color-primary-800);
+    background: var(--_poveste-primary-800);
   }
   .poveste-date-day[data-selected] {
-    background: var(--color-primary-500);
-    color: var(--color-white);
+    background: var(--_poveste-primary-500);
+    color: var(--_poveste-white);
   }
   .poveste-color {
     align-items: center;
@@ -639,7 +848,7 @@
   }
   .poveste-color-swatch {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     cursor: pointer;
     background: 0 0;
     border: 1px solid #00000040;
@@ -653,10 +862,10 @@
     border-color: #ffffff40;
   }
   .poveste-color-swatch:hover {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-color-swatch-fill {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     height: 100%;
   }
@@ -665,7 +874,7 @@
   }
   .poveste-color-field {
     box-sizing: border-box;
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     color: inherit;
     background: 0 0;
@@ -678,13 +887,13 @@
     border-color: #ffffff40;
   }
   .poveste-color-field:focus {
-    border-color: var(--color-primary-500);
+    border-color: var(--_poveste-primary-500);
   }
   .poveste-color-picker {
     z-index: 100;
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-sm);
-    background: var(--color-gray-50);
+    border: 1px solid var(--_poveste-gray-200);
+    border-radius: var(--_poveste-radius-sm);
+    background: var(--_poveste-gray-50);
     flex-direction: column;
     gap: .5rem;
     padding: .5rem;
@@ -692,15 +901,15 @@
     box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
   }
   .poveste-color-picker:where(.ptw-dark,.ptw-dark *) {
-    border-color: var(--color-gray-850);
-    background: var(--color-gray-700);
+    border-color: var(--_poveste-gray-850);
+    background: var(--_poveste-gray-700);
   }
   .poveste-color-area {
     width: 10rem;
     height: 8rem;
   }
   .poveste-color-area-surface {
-    border-radius: var(--radius-sm);
+    border-radius: var(--_poveste-radius-sm);
     width: 100%;
     height: 100%;
   }
@@ -714,7 +923,7 @@
     height: 100%;
   }
   .poveste-color-thumb {
-    border: 2px solid var(--color-white);
+    border: 2px solid var(--_poveste-white);
     border-radius: 9999px;
     width: .75rem;
     height: .75rem;
@@ -758,7 +967,6 @@
       --color-red-500: oklch(63.7% 0.237 25.331);
       --color-red-600: oklch(57.7% 0.245 27.325);
       --color-red-700: oklch(50.5% 0.213 27.518);
-      --color-orange-500: oklch(70.5% 0.213 47.604);
       --color-amber-400: oklch(82.8% 0.189 84.429);
       --color-amber-600: oklch(66.6% 0.179 58.318);
       --color-gray-50: var(--_poveste-color-gray-50, #fafafa);
@@ -791,6 +999,7 @@
       --radius-lg: 0.75rem;
       --ease-out: cubic-bezier(0, 0, 0.2, 1);
       --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+      --animate-spin: spin 1s linear infinite;
       --blur-md: 12px;
       --default-transition-duration: 150ms;
       --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -932,9 +1141,6 @@
     .m-1 {
       margin: var(--spacing);
     }
-    .m-4 {
-      margin: calc(var(--spacing) * 4);
-    }
     .m-auto {
       margin: auto;
     }
@@ -950,18 +1156,12 @@
     .-my-1 {
       margin-block: calc(var(--spacing) * -1);
     }
-    .my-0 {
-      margin-block: 0px;
-    }
     .my-2 {
       margin-block: calc(var(--spacing) * 2);
     }
     .my-4 {
       margin-block: calc(var(--spacing) * 4);
     }
-    .my-8 {
-      margin-block: calc(var(--spacing) * 8);
-    }
     .ms-0 {
       margin-inline-start: 0px;
     }
@@ -1470,9 +1670,6 @@
     .h-16 {
       height: calc(var(--spacing) * 16);
     }
-    .h-48 {
-      height: calc(var(--spacing) * 48);
-    }
     .h-64 {
       height: calc(var(--spacing) * 64);
     }
@@ -1521,9 +1718,6 @@
     .min-h-0 {
       min-height: 0px;
     }
-    .min-h-32 {
-      min-height: calc(var(--spacing) * 32);
-    }
     .min-h-full {
       min-height: 100%;
     }
@@ -1551,9 +1745,6 @@
     .w-20 {
       width: calc(var(--spacing) * 20);
     }
-    .w-28 {
-      width: calc(var(--spacing) * 28);
-    }
     .w-64 {
       width: calc(var(--spacing) * 64);
     }
@@ -1650,6 +1841,9 @@
     .transform {
       transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
     }
+    .animate-spin {
+      animation: var(--animate-spin);
+    }
     .cursor-default {
       cursor: default;
     }
@@ -1665,30 +1859,18 @@
     .cursor-pointer {
       cursor: pointer;
     }
-    .cursor-text {
-      cursor: text;
-    }
     .resize {
       resize: both;
     }
     .resize-none {
       resize: none;
     }
-    .resize-y {
-      resize: vertical;
-    }
     .grid-cols-\[1fr_auto_1fr\] {
       grid-template-columns: 1fr auto 1fr;
     }
-    .grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
-      grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
-    }
     .flex-col {
       flex-direction: column;
     }
-    .flex-row {
-      flex-direction: row;
-    }
     .flex-wrap {
       flex-wrap: wrap;
     }
@@ -1958,6 +2140,9 @@
         background-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
       }
     }
+    .bg-gray-700 {
+      background-color: var(--color-gray-700);
+    }
     .bg-primary-50 {
       background-color: var(--color-primary-50);
     }
@@ -2166,12 +2351,6 @@
       --tw-tracking: var(--tracking-wide);
       letter-spacing: var(--tracking-wide);
     }
-    .text-ellipsis {
-      text-overflow: ellipsis;
-    }
-    .whitespace-nowrap {
-      white-space: nowrap;
-    }
     .whitespace-pre-wrap {
       white-space: pre-wrap;
     }
@@ -2205,9 +2384,6 @@
     .text-inherit {
       color: inherit;
     }
-    .text-orange-500 {
-      color: var(--color-orange-500);
-    }
     .text-primary-500 {
       color: var(--color-primary-500);
     }
@@ -2412,9 +2588,6 @@
     .last\:mb-0:last-child {
       margin-bottom: 0px;
     }
-    .focus-within\:border-primary-500:focus-within {
-      border-color: var(--color-primary-500);
-    }
     .focus-within\:bg-gray-500\/5:focus-within {
       background-color: var(--color-gray-500);
       @supports (color: color-mix(in lab, red, red)) {
@@ -2498,9 +2671,6 @@
         opacity: 100%;
       }
     }
-    .focus\:border-primary-500:focus {
-      border-color: var(--color-primary-500);
-    }
     .focus\:border-primary-500\/50:focus {
       border-color: var(--color-primary-500);
       @supports (color: color-mix(in lab, red, red)) {
@@ -2731,11 +2901,6 @@
       .dark\:group-hover\:bg-primary-700:where(.ptw-dark, .ptw-dark *):is(:where(.group):hover *) {
         background-color: var(--color-primary-700);
       }
-    }
-    .dark\:focus-within\:border-primary-500:where(.ptw-dark, .ptw-dark *):focus-within {
-      border-color: var(--color-primary-500);
-    }
-    @media (hover: hover) {
       .dark\:hover\:border-primary-500:where(.ptw-dark, .ptw-dark *):hover {
         border-color: var(--color-primary-500);
       }
@@ -2766,9 +2931,6 @@
         color: var(--color-primary-400);
       }
     }
-    .dark\:focus\:border-primary-500:where(.ptw-dark, .ptw-dark *):focus {
-      border-color: var(--color-primary-500);
-    }
     .poveste-story-list-folder-button:hover .\[\.poveste-story-list-folder-button\:hover_\&\]\:opacity-100 {
       opacity: 100%;
     }
@@ -3172,6 +3334,11 @@
     syntax: "*";
     inherits: false;
   }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
   @layer properties {
     @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
       *, ::before, ::after, ::backdrop {