@djangocfg/widget-visual 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-visual",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Presentation pieces: a colour picker and palette, a marquee, a QR code, an image gallery and a Lottie player",
   "keywords": [
     "color-picker",
@@ -52,8 +52,8 @@
       "default": "./src/gallery/index.ts"
     },
     "./lottie-player": {
-      "types": "./src/lottie/index.ts",
-      "default": "./src/lottie/index.ts"
+      "types": "./src/lottie/index.tsx",
+      "default": "./src/lottie/index.tsx"
     }
   },
   "files": [
@@ -66,28 +66,30 @@
   "scripts": {
     "check": "tsc --noEmit",
     "check-types": "tsc --noEmit",
+    "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-kit": "^0.1.1",
+    "@djangocfg/widget-kit": "^0.1.2",
     "@radix-ui/react-direction": "^1.1.2",
     "@radix-ui/react-slot": "^1.3.0",
+    "@types/qrcode": "^1.5.6",
     "class-variance-authority": "^0.7.1",
     "qrcode": "^1.5.4",
     "react-lottie-player": "^2.1.0"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/i18n": "^2.1.543",
+    "@djangocfg/ui-core": "^2.1.543",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.542",
-    "@djangocfg/typescript-config": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/i18n": "^2.1.543",
+    "@djangocfg/typescript-config": "^2.1.543",
+    "@djangocfg/ui-core": "^2.1.543",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/qrcode": "^1.5.6",

package/src/design/ColorPicker/ColorPicker.tsx

@@ -15,28 +15,12 @@ import { Button } from '@djangocfg/ui-core/components';
 import { ColorPickerStoreProvider, useStoreContext, useStore } from './context/ColorPickerStore';
 import { ColorPickerProvider, useColorPickerContext } from './context/ColorPickerContext';
 import { hexToRgb, rgbToHsv, rgbToHex } from './lib/color-utils';
-import type { ColorPickerProps, DivProps, StoreState, ColorValue } from './types';
+import type { ColorPickerProps } from './types';
 
 const ROOT_NAME = 'ColorPicker';
 const TRIGGER_NAME = 'ColorPickerTrigger';
 const CONTENT_NAME = 'ColorPickerContent';
 
-function useLazyRef<T>(init: () => T): React.RefObject<T> {
-  const ref = React.useRef<T | null>(null);
-  if (ref.current === null) {
-    ref.current = init();
-  }
-  return ref as React.RefObject<T>;
-}
-
-function useAsRef<T>(value: T) {
-  const ref = React.useRef(value);
-  React.useEffect(() => {
-    ref.current = value;
-  });
-  return ref;
-}
-
 export function ColorPicker(props: ColorPickerProps) {
   const {
     value: valueProp,
@@ -59,11 +43,16 @@ export function ColorPicker(props: ColorPickerProps) {
   const colorString = valueProp ?? defaultValue;
   const color = hexToRgb(colorString);
 
+  // Mount-time seed for the store, deliberately frozen. These feed the
+  // provider's `initial*` props, which it reads once; recomputing them on a
+  // prop change would suggest a later `value` re-seeds the picker, and it does
+  // not — the store owns the colour after mount.
   const initialState = React.useMemo(() => ({
     color,
     hsv: rgbToHsv(color),
     open: openProp ?? defaultOpen ?? false,
     format: formatProp ?? defaultFormat,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
 
   return (
@@ -93,7 +82,15 @@ export function ColorPicker(props: ColorPickerProps) {
 
 ColorPicker.displayName = ROOT_NAME;
 
-interface ColorPickerImplProps extends Omit<ColorPickerProps, 'defaultValue' | 'onValueChange' | 'onOpenChange' | 'format' | 'defaultFormat' | 'onFormatChange'> {}
+type ColorPickerImplProps = Omit<
+  ColorPickerProps,
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'onOpenChange'
+  | 'format'
+  | 'defaultFormat'
+  | 'onFormatChange'
+>;
 
 function ColorPickerImpl(props: ColorPickerImplProps) {
   const {

package/src/design/ColorPicker/parts/ColorPickerArea.tsx

@@ -11,9 +11,10 @@ import type { HSVColorValue } from '../types';
 
 const AREA_NAME = 'ColorPickerArea';
 
-export function ColorPickerArea(props: React.ComponentProps<'div'> & { asChild?: boolean }) {
+// No `asChild`: the area owns pointer capture and its own geometry, so it
+// cannot delegate its element to a caller's.
+export function ColorPickerArea(props: React.ComponentProps<'div'>) {
   const {
-    asChild,
     onPointerDown: onPointerDownProp,
     onPointerMove: onPointerMoveProp,
     onPointerUp: onPointerUpProp,

package/src/design/ColorPicker/parts/ColorPickerInput.tsx

@@ -11,9 +11,10 @@ import {
   rgbToHsv,
   rgbToHsl,
   hslToRgb,
+  hsvToRgb,
   parseColorString,
 } from '../lib/color-utils';
-import type { ColorValue, ColorFormat, ColorPickerInputProps } from '../types';
+import type { ColorValue, ColorPickerInputProps } from '../types';
 
 const INPUT_NAME = 'ColorPickerInput';
 
@@ -506,7 +507,3 @@ function HsbInput(props: HsbInputProps) {
   );
 }
 
-function hsvToRgb(hsv: import('../types').HSVColorValue): ColorValue {
-  const { hsvToRgb: fn } = require('../lib/color-utils');
-  return fn(hsv);
-}

package/src/gallery/components/media/GalleryImage.tsx

@@ -19,7 +19,10 @@ export const GalleryImage = memo(function GalleryImage({
   onLoad,
   onError,
   onClick,
-  priority = false,
+  // Accepted but not yet honoured: the fetch is driven by `useImageLoader`'s
+  // `Image()`, which has no priority hint to forward. Threading one through is
+  // a change to that hook, not to this component.
+  priority: _priority = false,
   objectFit = 'cover',
   className,
 }: GalleryImageProps) {

package/src/gallery/gallery.stories.tsx

@@ -126,15 +126,15 @@ export const GridMasonry: Story = {
   render: () => (
     <div className="space-y-8 w-[820px]">
       <div>
-        <div className="text-xs font-medium text-muted-foreground mb-2">layout="mosaic-5"</div>
+        <div className="text-xs font-medium text-muted-foreground mb-2">{'layout="mosaic-5"'}</div>
         <GalleryGrid images={IMAGES} layout="mosaic-5" rounded="lg" gap={2} showMoreBadge />
       </div>
       <div>
-        <div className="text-xs font-medium text-muted-foreground mb-2">layout="hero-left"</div>
+        <div className="text-xs font-medium text-muted-foreground mb-2">{'layout="hero-left"'}</div>
         <GalleryGrid images={IMAGES.slice(0, 3)} layout="hero-left" rounded="lg" gap={2} />
       </div>
       <div>
-        <div className="text-xs font-medium text-muted-foreground mb-2">layout="grid-2x2"</div>
+        <div className="text-xs font-medium text-muted-foreground mb-2">{'layout="grid-2x2"'}</div>
         <GalleryGrid images={IMAGES.slice(0, 4)} layout="grid-2x2" rounded="lg" gap={2} />
       </div>
     </div>

package/src/lottie/types.ts

@@ -133,6 +133,8 @@ export interface LottieAnimationData {
   h: number;
   nm: string;
   ddd: number;
-  assets: any[];
-  layers: any[];
+  // Opaque Lottie JSON: this package passes the document straight to the
+  // player and never reads inside these.
+  assets: unknown[];
+  layers: unknown[];
 }

package/src/marquee/Marquee.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { Slot as SlotPrimitive } from '@radix-ui/react-slot';
 import { useDirection as useDirectionPrimitive } from '@radix-ui/react-direction';
 import * as React from 'react';
 import { useComposedRefs } from '@djangocfg/ui-core/lib';
 import { cn } from '@djangocfg/ui-core/lib';
-import type { MarqueeProps, MarqueeContextValue, MarqueeEdgeProps, Side, Orientation } from './types';
+import type { MarqueeProps, MarqueeContextValue, MarqueeEdgeProps, Orientation } from './types';
 
 const ROOT_NAME = 'Marquee';
 const CONTENT_NAME = 'MarqueeContent';

package/src/qrcode/QRCode.tsx

@@ -387,6 +387,10 @@ export function QRCodeDownload(props: QRCodeDownloadProps) {
         URL.revokeObjectURL(link.href);
       }
     },
+    // The single handler, not the whole rest-props object: `buttonProps` is a
+    // new reference every render, so depending on it would rebuild this
+    // callback unconditionally.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [dataUrl, svgString, filename, format, buttonProps.onClick],
   );