@openpawlabs/diy-guides-ui 1.0.0 → 1.1.0

package/dist/components/GuideStep/GuideStep.d.ts

@@ -1,5 +1,26 @@
 import { type ReactNode } from "react";
 import { type GuideColor } from "../../types/colors";
+/**
+ * Optional, editor-only media affordances. Presence switches `GuideStep.Media`
+ * into edit mode: an empty-state add target, click-to-replace on the main image,
+ * a remove control per thumbnail, and a "+" tile to append. All members are
+ * intent callbacks — the library performs no file or menu logic. Omit entirely
+ * for the read-only reader experience.
+ */
+export interface GuideStepMediaEditing {
+    /** Append a new image (e.g. open a file picker). Drives the empty target and "+" tile. */
+    onAddImage?: () => void;
+    /** Replace the image at `index` (fired by clicking the main image). */
+    onReplaceImage?: (index: number) => void;
+    /** Remove the image at `index` (fired by a thumbnail's remove control). */
+    onRemoveImage?: (index: number) => void;
+    /** Selection changed to `index` (in edit mode thumbnails select on click). */
+    onSelectImage?: (index: number) => void;
+    /** Controlled active image index. */
+    activeIndex?: number;
+    /** Show the "+" add tile while below the three-image limit. @default true */
+    canAddImage?: boolean;
+}
 export interface GuideStepProps {
     /** Step number shown in the badge. Auto-assigned when inside `GuideStepList`. */
     number?: number;
@@ -13,6 +34,11 @@ export interface GuideStepProps {
     onCompletedChange?: (completed: boolean) => void;
     /** Render the "mark complete" checkbox. @default true */
     completable?: boolean;
+    /**
+     * Editor-only media affordances. When provided, the media area becomes
+     * editable (add / replace / remove / select). Leave undefined for readers.
+     */
+    mediaEditing?: GuideStepMediaEditing;
     /** Step body — requires `GuideStep.Media` (≥1 image) and `GuideStep.Bullets` (≥1 bullet). */
     children?: ReactNode;
     className?: string;
@@ -32,6 +58,13 @@ export interface GuideStepBulletProps {
     label?: ReactNode;
     /** Hide the auto-generated label for `caution`, `reminder`, and `note` bullets. */
     hideLabel?: boolean;
+    /**
+     * Editor-only: when set, the marker (dot or semantic icon) renders as a button
+     * that fires this on press — e.g. to open a color / variant picker. Omit for readers.
+     */
+    onMarkerPress?: () => void;
+    /** Accessible label for the marker button when `onMarkerPress` is set. */
+    markerAriaLabel?: string;
     children: ReactNode;
     className?: string;
 }
@@ -45,8 +78,8 @@ declare function GuideStepBullets({ children, className, }: {
     className?: string;
 }): import("react").JSX.Element;
 /** A single instruction line — dot bullets or semantic caution / reminder / note bullets. */
-declare function GuideStepBullet({ variant, color, label, hideLabel, children, className, }: GuideStepBulletProps): import("react").JSX.Element;
-declare function GuideStepRoot({ number, title, isCompleted, defaultCompleted, onCompletedChange, completable, children, className, }: GuideStepProps): import("react").JSX.Element;
+declare function GuideStepBullet({ variant, color, label, hideLabel, onMarkerPress, markerAriaLabel, children, className, }: GuideStepBulletProps): import("react").JSX.Element;
+declare function GuideStepRoot({ number, title, isCompleted, defaultCompleted, onCompletedChange, completable, mediaEditing, children, className, }: GuideStepProps): import("react").JSX.Element;
 /**
  * A single numbered guide step: header with number badge and optional completion
  * checkbox, plus a two-column body (main image left, thumbnails + bullets right).

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

@@ -1 +1 @@
-{"version":3,"file":"GuideStep.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAW7D,MAAM,WAAW,cAAc;IAC7B,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4FAA4F;AAC5F,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAE7E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,iGAAiG;IACjG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0HD,0FAA0F;AAC1F,iBAAS,cAAc,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,QAEvD;AAED,iDAAiD;AACjD,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAIA;AAED,6FAA6F;AAC7F,iBAAS,eAAe,CAAC,EACvB,OAAe,EACf,KAAc,EACd,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BA2CtB;AA2ED,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,gBAAwB,EACxB,iBAAiB,EACjB,WAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAkFhB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}
+{"version":3,"file":"GuideStep.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAW7D;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB;IACpC,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC7B,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4FAA4F;AAC5F,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAE7E,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,iGAAiG;IACjG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4JD,0FAA0F;AAC1F,iBAAS,cAAc,CAAC,MAAM,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,QAEvD;AAED,iDAAiD;AACjD,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAIA;AAED,6FAA6F;AAC7F,iBAAS,eAAe,CAAC,EACvB,OAAe,EACf,KAAc,EACd,KAAK,EACL,SAAiB,EACjB,aAAa,EACb,eAAe,EACf,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BAgEtB;AA6KD,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,gBAAwB,EACxB,iBAAiB,EACjB,WAAkB,EAClB,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BAsFhB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}

package/dist/components/GuideStep/GuideStep.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: (({ number, title, isCompleted, defaultCompleted, onCompletedChange, completable, children, className, }: import("./GuideStep").GuideStepProps) => import("react").JSX.Element) & {
+    component: (({ number, title, isCompleted, defaultCompleted, onCompletedChange, completable, mediaEditing, children, className, }: import("./GuideStep").GuideStepProps) => import("react").JSX.Element) & {
         Media: (_props: {
             children?: import("react").ReactNode;
         }) => null;
@@ -9,7 +9,7 @@ declare const meta: {
             children: import("react").ReactNode;
             className?: string;
         }) => import("react").JSX.Element;
-        Bullet: ({ variant, color, label, hideLabel, children, className, }: import("./GuideStep").GuideStepBulletProps) => import("react").JSX.Element;
+        Bullet: ({ variant, color, label, hideLabel, onMarkerPress, markerAriaLabel, children, className, }: import("./GuideStep").GuideStepBulletProps) => import("react").JSX.Element;
     };
     tags: string[];
     parameters: {
@@ -32,5 +32,6 @@ export declare const MultipleImages: Story;
 export declare const DotBullets: Story;
 export declare const SemanticBullets: Story;
 export declare const Completed: Story;
+export declare const EditingAffordances: Story;
 export declare const WithoutCompletion: Story;
 //# sourceMappingURL=GuideStep.stories.d.ts.map

package/dist/components/GuideStep/GuideStep.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GuideStep.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqD5D,QAAA,MAAM,IAAI;;;;oBAuHA,CAAA;;;;qBAKA,CAAC;;;;;;;;;;;;;;;;;CAhHuB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC"}
+{"version":3,"file":"GuideStep.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA+D5D,QAAA,MAAM,IAAI;;;;oBA4KoD,CAAC;;;;qBAMnD,CAAC;;;;;;;;;;;;;;;;;CAtKqB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuEhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC"}

package/dist/components/GuideStep/index.d.ts

@@ -1,3 +1,3 @@
 export { GuideStep } from "./GuideStep";
-export type { GuideStepProps, GuideStepBulletProps, GuideStepBulletVariant } from "./GuideStep";
+export type { GuideStepProps, GuideStepBulletProps, GuideStepBulletVariant, GuideStepMediaEditing, } from "./GuideStep";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/GuideStep/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,aAAa,CAAC"}

package/dist/components/GuideStepList/GuideStepList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GuideStepList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStepList/GuideStepList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAkBhD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAQ4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqDrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmChC,CAAC"}
+{"version":3,"file":"GuideStepList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStepList/GuideStepList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAkBhD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAQ4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyDrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmChC,CAAC"}

package/dist/components/MediaFigure/MediaFigureModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFigureModel.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigureModel.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE,qBAAqB,+BAqE9D"}
+{"version":3,"file":"MediaFigureModel.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigureModel.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE,qBAAqB,+BAyD9D"}