@djangocfg/ui-core 2.1.541 → 2.1.542

package/src/lib/get-element-ref.ts

@@ -3,17 +3,21 @@
 import * as React from "react";
 
 /**
- * Get the ref from a React element without throwing warnings.
+ * React 18 exposed `ref` on the element itself; React 19 moved it into `props`.
+ * Neither placement is in `ReactElement`'s public type, so the legacy one is
+ * declared here rather than asserted away.
  */
-function getElementRef(element: React.ReactElement) {
+type ElementWithLegacyRef = React.ReactElement & { ref?: React.Ref<unknown> };
+
+/** Get the ref from a React element without throwing warnings. */
+function getElementRef(element: ElementWithLegacyRef) {
   if (!React.isValidElement(element)) return undefined;
 
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
   let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   if (mayWarn) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (element as any).ref;
+    return element.ref;
   }
 
   // React 19 in DEV
@@ -25,8 +29,7 @@ function getElementRef(element: React.ReactElement) {
 
   // Not DEV
   return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (element.props as { ref?: React.Ref<unknown> }).ref || (element as any).ref
+    (element.props as { ref?: React.Ref<unknown> }).ref || element.ref
   );
 }
 

package/src/lib/pretext/pretext.types.ts

@@ -1,72 +1,27 @@
 // Adapted from jalcoui (MIT) — github.com/jal-co/ui
 //
-// Local mirror of the @chenglou/pretext public API. The runtime dependency
-// is declared `optional` (see ui-tools/package.json), so consumers that
-// never use BalancedText / pretext-powered tools don't pay for it. To keep
-// `pnpm check` green without the dependency installed, we redeclare just
-// the types we touch — no `import type from '@chenglou/pretext'`.
-//
-// Mirrors the public surface as of @chenglou/pretext 0.0.7. If the upstream
-// types drift, update here.
-
-export interface PrepareOptions {
-  whiteSpace?: 'normal' | 'pre' | 'pre-wrap' | 'pre-line';
-}
-
-// Opaque handles — internal shape doesn't matter to consumers of the hooks.
-// We brand them so the two flavours don't get accidentally swapped.
-export interface PreparedText {
-  readonly __brand: 'PreparedText';
-}
-
-export interface PreparedTextWithSegments {
-  readonly __brand: 'PreparedTextWithSegments';
-}
-
-export interface LayoutResult {
-  lineCount: number;
-  height: number;
-}
-
-export interface LayoutLine {
-  text: string;
-  width: number;
-  start: number;
-  end: number;
-}
-
-export interface LayoutLinesResult {
-  lineCount: number;
-  height: number;
-  lines: LayoutLine[];
-}
-
-export interface WalkLineRange {
-  width: number;
-  start: number;
-  end: number;
-}
-
-export interface PretextModule {
-  prepare(text: string, font: string, options?: PrepareOptions): PreparedText;
-  prepareWithSegments(
-    text: string,
-    font: string,
-    options?: PrepareOptions,
-  ): PreparedTextWithSegments;
-  layout(
-    prepared: PreparedText,
-    maxWidth: number,
-    lineHeight: number,
-  ): LayoutResult;
-  layoutWithLines(
-    prepared: PreparedTextWithSegments,
-    maxWidth: number,
-    lineHeight: number,
-  ): LayoutLinesResult;
-  walkLineRanges(
-    prepared: PreparedTextWithSegments,
-    maxWidth: number,
-    visit: (line: WalkLineRange) => void,
-  ): void;
-}
+// Re-export of the @chenglou/pretext public types. A hand-written mirror used
+// to live here to keep `pnpm check` green while the runtime was an optional
+// dependency; it is a hard `dependencies` entry now, and the mirror had already
+// drifted — it declared `LayoutLine.start/end` as `number` where upstream
+// returns a `{ segmentIndex, graphemeIndex }` cursor, so every consumer of
+// `usePretextLines` was typed against a shape the runtime never produces.
+
+export type {
+  PrepareOptions,
+  PreparedText,
+  PreparedTextWithSegments,
+  LayoutResult,
+  LayoutLine,
+  LayoutLineRange,
+  LayoutLinesResult,
+  LayoutCursor,
+} from '@chenglou/pretext';
+
+import type * as pretext from '@chenglou/pretext';
+
+/** The subset of the module surface the hooks in this folder call. */
+export type PretextModule = Pick<
+  typeof pretext,
+  'prepare' | 'prepareWithSegments' | 'layout' | 'layoutWithLines' | 'walkLineRanges'
+>;

package/src/lib/pretext/use-pretext.ts

@@ -6,15 +6,16 @@
 //
 // Powered by Pretext by Cheng Lou — github.com/chenglou/pretext
 //
-// `@chenglou/pretext` is declared as an optionalDependency in
-// `packages/ui-tools/package.json` — consumers that never use BalancedText
-// (or other pretext-based tools) can install ui-tools without it. The
-// `getPretext()` helper uses a CommonJS `require()` so the optional
-// dependency is resolved lazily at first use; if it is missing, the
-// `require` throws at call site, never at module-load.
+// `@chenglou/pretext` is imported statically because it is ESM-only
+// (`"type": "module"`, and its `exports` map offers only an `import`
+// condition). The previous lazy `require('@chenglou/pretext')` could not
+// resolve it in any runtime: under Vite/ESM `require` is not defined at all,
+// so the first render of `BalancedText` threw `require is not defined`
+// rather than degrading gracefully.
 
 'use client';
 
+import * as pretext from '@chenglou/pretext';
 import * as React from 'react';
 import type {
   PreparedText,
@@ -35,13 +36,8 @@ export type {
 
 const isBrowser = typeof window !== 'undefined';
 
-let cachedPretext: PretextModule | null = null;
-
 function getPretext(): PretextModule {
-  if (cachedPretext) return cachedPretext;
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  cachedPretext = require('@chenglou/pretext') as PretextModule;
-  return cachedPretext;
+  return pretext;
 }
 
 const EMPTY_LAYOUT: LayoutResult = { lineCount: 0, height: 0 };

package/src/snippets/LazyComponent.tsx

@@ -7,7 +7,7 @@
 
 'use client';
 
-import React, { Suspense, ReactNode, ComponentType, lazy } from 'react';
+import React, { Suspense, ReactNode, ComponentType, LazyExoticComponent, lazy } from 'react';
 
 // Default loading spinner
 export const DefaultLoader = () => (
@@ -67,13 +67,13 @@ export function LazyWrapper({ children, fallback }: LazyWrapperProps) {
  * <HeavyComponent someProps={value} />
  * ```
  */
-export function createLazyComponent<T extends ComponentType<any>>(
-  importFn: () => Promise<{ default: T }>,
+export function createLazyComponent<P extends object>(
+  importFn: () => Promise<{ default: ComponentType<P> }>,
   fallback?: ReactNode
 ) {
   const LazyComponent = lazy(importFn);
 
-  return function WrappedLazyComponent(props: React.ComponentProps<T>) {
+  return function WrappedLazyComponent(props: P) {
     return (
       <Suspense fallback={fallback ?? <DefaultLoader />}>
         <LazyComponent {...props} />
@@ -95,18 +95,18 @@ export function createLazyComponent<T extends ComponentType<any>>(
  * ```
  */
 export function createLazyNamedComponent<
-  T extends Record<string, ComponentType<any>>,
-  K extends keyof T
+  P extends object,
+  K extends string = string
 >(
-  importFn: () => Promise<T>,
+  importFn: () => Promise<Record<K, ComponentType<P>>>,
   exportName: K,
   fallback?: ReactNode
 ) {
-  const LazyComponent = lazy(() =>
+  const LazyComponent: LazyExoticComponent<ComponentType<P>> = lazy(() =>
     importFn().then((mod) => ({ default: mod[exportName] }))
   );
 
-  return function WrappedLazyComponent(props: React.ComponentProps<T[K]>) {
+  return function WrappedLazyComponent(props: P) {
     return (
       <Suspense fallback={fallback ?? <DefaultLoader />}>
         <LazyComponent {...props} />

package/src/styles/palette/useThemePalette.ts

@@ -101,6 +101,13 @@ export function useThemePalette(): ThemePalette {
   const theme = useResolvedTheme();
 
   return useMemo(() => {
+    // `theme` is read here so the dependency is real to the linter as well as to
+    // us: every getCssColorAsHex call below resolves against the live DOM, whose
+    // values change when the theme flips, but nothing in that call chain
+    // mentions `theme`. Without this read the memo looks free of it and would be
+    // cached across a theme change, returning the previous theme's colors.
+    void theme;
+
     return {
       // Base colors
       background: getCssColorAsHex('background'),