aporia 0.2.7 → 0.2.8

package/dist/components/Category.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../src/components/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,gBAAgB,CAAA;AAavB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,gBAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,gBAAwB,EACxB,SAAS,GACV,EAAE,aAAa,2CAqJf"}
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../src/components/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,gBAAgB,CAAA;AAavB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,gBAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,gBAAwB,EACxB,SAAS,GACV,EAAE,aAAa,2CAsJf"}

package/dist/components/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AAwBA,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AAoGD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwehE"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/components/ColorPicker.tsx"],"names":[],"mappings":"AA0BA,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AA4FD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwehE"}

package/dist/components/ColorRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorRow.d.ts","sourceRoot":"","sources":["../../src/components/ColorRow.tsx"],"names":[],"mappings":"AAMA,OAAO,gBAAgB,CAAA;AAevB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,2CA4DnG"}
+{"version":3,"file":"ColorRow.d.ts","sourceRoot":"","sources":["../../src/components/ColorRow.tsx"],"names":[],"mappings":"AAMA,OAAO,gBAAgB,CAAA;AAOvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,aAAa,2CA6DnG"}

package/dist/components/GradientPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientPicker.d.ts","sourceRoot":"","sources":["../../src/components/GradientPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,CAAA;AAE7B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACzC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAmDD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAK,GAAG,MAAM,CAWzE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAmB9D;AAED,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAOhD,CAAA;AA+ED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAU,EAAE,EAAE,mBAAmB,2CAiHlF"}
+{"version":3,"file":"GradientPicker.d.ts","sourceRoot":"","sources":["../../src/components/GradientPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,sBAAsB,CAAA;AAE7B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACzC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA+CD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAK,GAAG,MAAM,CAWzE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAmB9D;AAED,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAOhD,CAAA;AA2ED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAU,EAAE,EAAE,mBAAmB,2CAiHlF"}

package/dist/components/Panel.d.ts

@@ -1,10 +1,23 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;
+    /** When true, panel is fixed to top-left and floats above page content. */
+    floating?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Fires when the collapsed state changes (controlled or uncontrolled). */
+    onCollapsedChange?: (nextCollapsed: boolean) => void;
+    /** aria-label for the toggle button. */
+    collapseAriaLabel?: string;
 };
 /**
- * Default shell for configurator blocks: black surface, 24px radius, 16px padding,
- * column flex anchored to the start (top).
+ * Black configurator card that morphs between an expanded shell and a 32×32 icon.
+ *
+ * The same `<section>` element resizes in place: width/height/padding/border-radius
+ * animate via Motion, content is clipped via `overflow: hidden` on the shell.
+ * No `layout` prop — that would scale via transforms and distort the rectangle.
  */
-export declare function Panel({ children, className, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Panel({ children, className, floating, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, style: externalStyle, ...domRest }: PanelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Panel.d.ts.map

package/dist/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CASjE"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,CAAA;IACnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAoED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,QAAe,EACf,SAAS,EAAE,aAAa,EACxB,gBAAwB,EACxB,iBAAiB,EACjB,iBAAkC,EAClC,KAAK,EAAE,aAAa,EACpB,GAAG,OAAO,EACX,EAAE,UAAU,2CAmZZ"}

package/dist/index.css

@@ -43,8 +43,15 @@
   --aporia-ui-font-size: 14px;
   --aporia-ui-line-height: 1.25;
 
-  /* Default panel width cap (matches the package demo). Override per app if needed. */
-  --aporia-panel-max-width: 360px;
+  /* Panel geometry defaults from the current Figma shell.
+   * Collapsed size (32×32) is hardcoded in `Panel.tsx` so Motion can animate
+   * to concrete pixel values; max-width remains overridable via this token. */
+  --aporia-panel-max-width: 280px;
+  --aporia-panel-offset-top: 40px;
+  --aporia-panel-offset-left: 40px;
+  --aporia-panel-offset-right: 40px;
+  --aporia-panel-offset-bottom: 40px;
+  --aporia-panel-z-index: 1000;
 
   /* Ticks (base color × layer opacity ≈ dark appearance) */
   --slider-tick: rgba(255, 255, 255, 0.32);
@@ -80,38 +87,159 @@
   --slider-debug-dom-value: rgba(80, 180, 255, 0.95);
   --slider-debug-dom-shadow: rgba(0, 0, 0, 0.35);
 }
-/* Shell for grouped controls: solid black card, generous radius, inset padding. */
+/*
+ * Aporia Panel — black card that morphs between expanded and a 32×32 icon.
+ *
+ * Motion drives: height, border-radius, padding, gap.
+ * CSS drives: width / max-width (handles % → px transitions natively).
+ * `overflow: hidden` clips content during the resize so we never see ragged edges.
+ */
 
 .aporiaPanel {
+  position: relative;
   box-sizing: border-box;
   width: 100%;
   max-width: min(var(--aporia-panel-max-width), 100%);
   min-width: 0;
-  /* Hug content: avoid stretching to fill a flex/grid parent’s unused vertical space. */
   flex: 0 0 auto;
-  height: auto;
-  min-height: 0;
-  max-height: none;
   align-self: stretch;
-  /* Typography + metrics: see `aporia-surfaces.css` (imported after components). */
-  /* Always read as the black configurator card, independent of host `color` / light UI. */
   color: var(--slider-text);
   color-scheme: dark;
   background-color: #000000;
-  border-radius: 24px;
-  padding: 16px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  transition:
+    width 0.28s cubic-bezier(0.77, 0, 0.175, 1),
+    max-width 0.28s cubic-bezier(0.77, 0, 0.175, 1);
   box-shadow:
     0 162px 45px 0 rgba(0, 0, 0, 0),
     0 103px 41px 0 rgba(0, 0, 0, 0.01),
     0 58px 35px 0 rgba(0, 0, 0, 0.05),
     0 26px 26px 0 rgba(0, 0, 0, 0.08),
     0 6px 14px 0 rgba(0, 0, 0, 0.09);
+}
+
+.aporiaPanel[data-floating='true'] {
+  position: fixed;
+  z-index: var(--aporia-panel-z-index, 1000);
+}
+
+.aporiaPanel[data-collapsed='true'] {
+  width: 32px;
+  max-width: 32px;
+  cursor: pointer;
+  touch-action: none;
+  overflow: hidden;
+}
+
+.aporiaPanelSnapHint {
+  position: fixed;
+  width: 32px;
+  height: 32px;
+  border-radius: 12px;
+  background: rgba(128, 128, 128, 1);
+  pointer-events: none;
+}
+
+/* Header row holds the logo toggle (and any future title / actions). */
+.aporiaPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+  min-height: 22px;
+  width: 100%;
+}
+
+.aporiaPanelToggle {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  /* Hover/press only — never animate width/height (Motion owns size). */
+  transition:
+    color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
+    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.aporiaPanelToggle:active {
+  transform: scale(0.97);
+}
+
+.aporiaPanelToggle:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 2px;
+}
+
+.aporiaPanel[data-collapsed='true'] .aporiaPanelToggle {
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.aporiaPanelLogoGlyph {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+/*
+ * Body holds Category blocks. It stays in flow at full opacity; on collapse
+ * we fade it out fast (so content disappears before the shell finishes shrinking).
+ * On expand we delay the fade-in so content appears after the shell has grown.
+ */
+.aporiaPanelBody {
+  /* Let slider overdrag render into panel side padding before clipping. */
+  --aporia-panel-overdrag-bleed: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  width: calc(100% + var(--aporia-panel-overdrag-bleed) * 2);
+  margin-left: calc(var(--aporia-panel-overdrag-bleed) * -1);
+  margin-right: calc(var(--aporia-panel-overdrag-bleed) * -1);
+  padding-left: var(--aporia-panel-overdrag-bleed);
+  padding-right: var(--aporia-panel-overdrag-bleed);
+  box-sizing: border-box;
+  margin-top: 16px;
+  opacity: 1;
+  /* Keep vertical scrolling, clip X at the panel edge (not row edge). */
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+
+.aporiaPanelBodyContent {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: stretch;
-  justify-content: flex-start;
-  align-content: flex-start;
+  min-width: 0;
+}
+
+.aporiaPanel[data-collapsed='true'] .aporiaPanelBody {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aporiaPanel,
+  .aporiaPanelToggle,
+  .aporiaPanelBody {
+    transition-duration: 0.01ms;
+  }
 }
 .category {
   display: flex;
@@ -156,11 +284,22 @@
   color: var(--color-muted);
   cursor: pointer;
   border-radius: 6px;
+  transform: scale(1);
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
-.categoryChevronBtn:hover {
-  color: var(--slider-text-muted);
-  background: rgba(255, 255, 255, 0.06);
+@media (hover: hover) and (pointer: fine) {
+  .categoryChevronBtn:hover {
+    color: var(--slider-text-muted);
+    background: rgba(255, 255, 255, 0.06);
+  }
+}
+
+.categoryChevronBtn:active {
+  transform: scale(0.97);
 }
 
 .categoryChevronBtn:focus-visible {
@@ -170,11 +309,11 @@
 
 .categoryChevronIcon {
   display: block;
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   transform: rotate(0deg);
   transform-origin: 50% 50%;
-  transition: transform 0.15s ease-out;
+  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .categoryChevronIcon[data-collapsed="true"] {
@@ -196,7 +335,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: opacity 0.15s ease-out;
+  transform: scale(1);
+  transition:
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .categoryDisabledDot::after {
@@ -207,13 +350,24 @@
   background: rgba(255, 255, 255, 0.85);
   flex-shrink: 0;
   transition:
-    transform 0.15s ease-out,
-    background-color 0.15s ease-out;
+    transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 
-.categoryDisabledDot:hover::after {
-  background: #ffffff;
-  transform: scale(1.15);
+@media (hover: hover) and (pointer: fine) {
+  .categoryDisabledDot:hover::after {
+    background: #ffffff;
+    transform: scale(1.15);
+  }
+}
+
+.categoryDisabledDot:active {
+  transform: scale(0.97);
+}
+
+.categoryDisabledDot:active::after {
+  transform: scale(1.05);
 }
 
 .categoryDisabledDot:focus-visible {
@@ -225,6 +379,15 @@
   opacity: 0.35;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .categoryChevronBtn,
+  .categoryChevronIcon,
+  .categoryDisabledDot,
+  .categoryDisabledDot::after {
+    transition-duration: 0ms;
+  }
+}
+
 .categoryTitle {
   margin: 0;
   flex: 1;
@@ -241,6 +404,19 @@
 
 .categoryBody {
   min-width: 0;
+  /*
+   * Overdrag fix: `overflow-x: visible` + `overflow-y: hidden` gets coerced and can
+   * clip SliderRow too early. Keep overflow visible, then clip only vertically via
+   * clip-path while allowing a small horizontal bleed.
+   */
+  --aporia-category-overdrag-bleed: 16px;
+  overflow: visible;
+  clip-path: inset(
+    0
+    calc(var(--aporia-category-overdrag-bleed) * -1)
+    0
+    calc(var(--aporia-category-overdrag-bleed) * -1)
+  );
 }
 
 /* Padding lives inside the height animation so it never springs on its own (8px + Panel gap = 16px between categories). */