@openpawlabs/diy-guides-ui 1.4.0 → 1.5.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.
- package/dist/components/GuideStep/GuideStep.d.ts +11 -5
- package/dist/components/GuideStep/GuideStep.d.ts.map +1 -1
- package/dist/components/GuideStep/GuideStep.stories.d.ts.map +1 -1
- package/dist/components/MediaFigure/MediaCropEditor.d.ts +27 -0
- package/dist/components/MediaFigure/MediaCropEditor.d.ts.map +1 -0
- package/dist/components/MediaFigure/MediaCropEditor.stories.d.ts +22 -0
- package/dist/components/MediaFigure/MediaCropEditor.stories.d.ts.map +1 -0
- package/dist/components/MediaFigure/MediaCropEditor.test.d.ts +2 -0
- package/dist/components/MediaFigure/MediaCropEditor.test.d.ts.map +1 -0
- package/dist/components/MediaFigure/MediaFigure.stories.d.ts.map +1 -1
- package/dist/components/MediaFigure/index.d.ts +2 -0
- package/dist/components/MediaFigure/index.d.ts.map +1 -1
- package/dist/diy-guides-ui.cjs +6 -6
- package/dist/diy-guides-ui.cjs.map +1 -1
- package/dist/diy-guides-ui.js +2921 -2733
- package/dist/diy-guides-ui.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/dist/utils/mediaCrop.d.ts +14 -0
- package/dist/utils/mediaCrop.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -2,16 +2,22 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
import { type GuideColor } from "../../types/colors";
|
|
3
3
|
/**
|
|
4
4
|
* Optional, editor-only media affordances. Presence switches `GuideStep.Media`
|
|
5
|
-
* into edit mode: an empty-state add target,
|
|
6
|
-
* a remove control per thumbnail, a "+" tile to append,
|
|
7
|
-
* drag-to-reorder thumbnails. All members are intent
|
|
8
|
-
* performs no file or menu logic. Omit entirely for the
|
|
5
|
+
* into edit mode: an empty-state add target, an "Edit annotations" / "Adjust crop"
|
|
6
|
+
* overlay on the main image, a remove control per thumbnail, a "+" tile to append,
|
|
7
|
+
* and (with `onReorderImage`) drag-to-reorder thumbnails. All members are intent
|
|
8
|
+
* callbacks — the library performs no file or menu logic. Omit entirely for the
|
|
9
|
+
* read-only reader experience.
|
|
9
10
|
*/
|
|
10
11
|
export interface GuideStepMediaEditing {
|
|
11
12
|
/** Append a new image (e.g. open a file picker). Drives the empty target and "+" tile. */
|
|
12
13
|
onAddImage?: () => void;
|
|
13
|
-
/** Edit annotations for the image at `index` (fired
|
|
14
|
+
/** Edit annotations for the image at `index` (fired from the main image overlay). */
|
|
14
15
|
onEditAnnotations?: (index: number) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Adjust the crop / display region for the image at `index`. When set, an
|
|
18
|
+
* "Adjust crop" action appears in the main image overlay beside "Edit annotations".
|
|
19
|
+
*/
|
|
20
|
+
onEditCrop?: (index: number) => void;
|
|
15
21
|
/** Remove the image at `index` (fired by a thumbnail's remove control). */
|
|
16
22
|
onRemoveImage?: (index: number) => void;
|
|
17
23
|
/**
|
|
@@ -1 +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;AAe7D
|
|
1
|
+
{"version":3,"file":"GuideStep.d.ts","sourceRoot":"","sources":["../../../src/components/GuideStep/GuideStep.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;AAyE5D,QAAA,MAAM,IAAI;;;;
|
|
1
|
+
{"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;AAyE5D,QAAA,MAAM,IAAI;;;;oBAyOmB,CAAC;;;;qBAIqB,CAAC;mBAItC,CAAb;;;;;;;;;;;;;;;;;CArOiC,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,KAiDxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAoC7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwBvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAyHhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { type MediaDisplayRegion } from "../../utils/mediaCrop";
|
|
2
|
+
export interface MediaCropEditorProps {
|
|
3
|
+
/** Image source to crop. */
|
|
4
|
+
src: string;
|
|
5
|
+
/**
|
|
6
|
+
* Current 4:3 region in source pixels. When omitted, the editor starts from the
|
|
7
|
+
* largest centered region (the same view the fixed frame center-crops to).
|
|
8
|
+
*/
|
|
9
|
+
region?: MediaDisplayRegion;
|
|
10
|
+
/** Reports a new region (source pixels) when the user finishes a drag. */
|
|
11
|
+
onChange: (region: MediaDisplayRegion) => void;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Interactive crop tool: shows the full source image with a draggable, 4:3-locked
|
|
16
|
+
* selection that maps directly to a {@link MediaDisplayRegion} in source pixels.
|
|
17
|
+
* Drag the box to move it, drag a corner to resize. The component owns all
|
|
18
|
+
* pixel geometry and reports the chosen region — selection chrome and persistence
|
|
19
|
+
* stay with the consumer (see the authoring tool's crop modal).
|
|
20
|
+
*
|
|
21
|
+
* Once the source loads, the editor publishes its aspect ratio as the
|
|
22
|
+
* `--crop-aspect` custom property on its root, so a sized container can fit the
|
|
23
|
+
* whole image without scrolling — e.g.
|
|
24
|
+
* `width: min(100cqw, calc(100cqh * var(--crop-aspect)))`.
|
|
25
|
+
*/
|
|
26
|
+
export declare function MediaCropEditor({ src, region, onChange, className, }: MediaCropEditorProps): import("react").JSX.Element;
|
|
27
|
+
//# sourceMappingURL=MediaCropEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaCropEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.tsx"],"names":[],"mappings":"AAUA,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AA2E/B,MAAM,WAAW,oBAAoB;IACnC,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BA6ItB"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react-vite";
|
|
2
|
+
import { MediaCropEditor } from "./MediaCropEditor";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof MediaCropEditor;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
docs: {
|
|
9
|
+
description: {
|
|
10
|
+
component: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
args: {
|
|
15
|
+
src: string;
|
|
16
|
+
onChange: () => void;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export default meta;
|
|
20
|
+
type Story = StoryObj<typeof meta>;
|
|
21
|
+
export declare const Default: Story;
|
|
22
|
+
//# sourceMappingURL=MediaCropEditor.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaCropEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AA0BpD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAQ8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqCrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaCropEditor.test.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaCropEditor.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaFigure.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,WAAW,EAGZ,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"MediaFigure.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAgEvB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAc0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2ClC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiBjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAC"}
|
|
@@ -2,4 +2,6 @@ export { MediaFigure } from "./MediaFigure";
|
|
|
2
2
|
export type { MediaFigureProps, MediaAnnotation, MediaAnnotationEditing, AnnotationTool, MediaDisplayRegion, PointAnnotation, CircleAnnotation, RectangleAnnotation, } from "./MediaFigure";
|
|
3
3
|
export { MediaFigureThumbnail } from "./MediaFigureThumbnail";
|
|
4
4
|
export type { MediaFigureThumbnailProps } from "./MediaFigureThumbnail";
|
|
5
|
+
export { MediaCropEditor } from "./MediaCropEditor";
|
|
6
|
+
export type { MediaCropEditorProps } from "./MediaCropEditor";
|
|
5
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
|