@reekon-tools/boldr-utils 1.8.2 → 1.8.4

package/dist/data/hooks/useAnnotationCanvasDoc.js

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { applyPatch, createEmptyCanvasState, } from '../../types/annotation.js';
+import { FileUploadType } from '../../types/firestore.js';
+import { useAnnotationDoc } from './useAnnotationDoc.js';
+import { useAnnotationMutations } from './useAnnotationMutations.js';
+import { hydrateCanvasState } from '../canvasPersistence.js';
+// Stable placeholder so useAnnotationMutations (which requires a non-null
+// scope) can be called unconditionally. Never used to write — flushes are
+// guarded on a real scope.
+const EMPTY_SCOPE = {
+    orgId: '',
+    projectId: '',
+    jobId: '',
+    groupId: '',
+};
+// Build the persisted fileData, omitting `isLabel` when undefined so the write
+// contains no undefined values (Firestore rejects them on RN).
+const buildFileData = (fileType, isLabel, canvas) => ({
+    fileType,
+    ...(isLabel !== undefined ? { isLabel } : {}),
+    canvas,
+});
+// Orchestrates load + auto-save for the annotation canvas. Hydrates the working
+// state from the persisted doc, applies commits optimistically, and persists
+// (debounced) through the data provider — creating the file on first save when
+// no `fileId` was supplied. Composes the existing low-level hooks so it stays
+// decoupled from any specific Firebase SDK.
+export const useAnnotationCanvasDoc = (options) => {
+    const { scope, fileId, fallbackViewport, debounceMs = 800, createSeed, onFileCreated, onSaveError, captureThumbnail, debugLogging = false, } = options;
+    const { data, loading, error } = useAnnotationDoc(scope, fileId);
+    const { create, update, uploadImage, deleteImage } = useAnnotationMutations(scope ?? EMPTY_SCOPE);
+    const [working, setWorking] = useState(null);
+    const [saveStatus, setSaveStatus] = useState('idle');
+    // Refs let the debounced/unmount flush read the latest values without
+    // re-creating timers on every keystroke.
+    const workingRef = useRef(null);
+    const dataRef = useRef(data);
+    const statusRef = useRef('idle');
+    const timerRef = useRef(null);
+    const createRef = useRef(create);
+    const updateRef = useRef(update);
+    const fileIdRef = useRef(fileId);
+    // Id of a file this hook created on first save (when opened with no fileId).
+    // Used for subsequent updates and to recognize the caller echoing it back
+    // into `fileId`.
+    const createdIdRef = useRef(null);
+    const createSeedRef = useRef(createSeed);
+    const onFileCreatedRef = useRef(onFileCreated);
+    const onSaveErrorRef = useRef(onSaveError);
+    const captureThumbnailRef = useRef(captureThumbnail);
+    const uploadImageRef = useRef(uploadImage);
+    // Guards against overlapping thumbnail captures (each save fires one).
+    const thumbnailSavingRef = useRef(false);
+    const debugRef = useRef(debugLogging);
+    // JSON of the canvas we last wrote, to recognize (and ignore) the snapshot
+    // echo of our own write when reconciling incoming remote changes.
+    const lastSavedJsonRef = useRef(null);
+    // Guards against two creates racing if flushes overlap.
+    const creatingRef = useRef(false);
+    workingRef.current = working;
+    dataRef.current = data;
+    statusRef.current = saveStatus;
+    createRef.current = create;
+    updateRef.current = update;
+    createSeedRef.current = createSeed;
+    onFileCreatedRef.current = onFileCreated;
+    onSaveErrorRef.current = onSaveError;
+    captureThumbnailRef.current = captureThumbnail;
+    uploadImageRef.current = uploadImage;
+    debugRef.current = debugLogging;
+    const setStatus = useCallback((next) => {
+        statusRef.current = next;
+        setSaveStatus(next);
+    }, []);
+    // Fire-and-forget thumbnail capture + upload, run after each successful save.
+    // Stable identity (reads refs) so it doesn't churn `flush`'s deps. Skips when
+    // no capturer is supplied or a capture is already in flight.
+    const saveThumbnail = useCallback(async (fileId) => {
+        const capture = captureThumbnailRef.current;
+        if (!capture || thumbnailSavingRef.current)
+            return;
+        thumbnailSavingRef.current = true;
+        try {
+            const blob = await capture();
+            if (blob)
+                await uploadImageRef.current(fileId, 'thumbnail', blob);
+        }
+        catch (e) {
+            console.warn('[useAnnotationCanvasDoc] thumbnail save failed', e);
+        }
+        finally {
+            thumbnailSavingRef.current = false;
+        }
+    }, []);
+    // Reset working state when the target document changes so the next snapshot
+    // hydrates the new file rather than leaking the previous one. Skip the reset
+    // when the new fileId is one we just created (the caller echoing it back) —
+    // our working state is already correct and must not be wiped.
+    useEffect(() => {
+        if (fileIdRef.current === fileId)
+            return;
+        fileIdRef.current = fileId;
+        if (fileId !== null && fileId === createdIdRef.current)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        createdIdRef.current = null;
+        lastSavedJsonRef.current = null;
+        setWorking(null);
+        setStatus('idle');
+    }, [fileId, setStatus]);
+    // Hydrate / reconcile from the persisted doc.
+    useEffect(() => {
+        // First load — always hydrate.
+        if (workingRef.current === null) {
+            setWorking(hydrateCanvasState(data, fallbackViewport));
+            lastSavedJsonRef.current = data?.fileData.canvas
+                ? JSON.stringify(data.fileData.canvas)
+                : null;
+            return;
+        }
+        // A write of ours is queued or in flight — ignore the snapshot; it is
+        // either the echo of our write or about to be superseded by it.
+        if (statusRef.current === 'saving' || timerRef.current !== null)
+            return;
+        // Clean locally: accept a genuine remote change, but ignore the echo of
+        // our own last write (same content).
+        const incoming = data?.fileData.canvas;
+        if (!incoming)
+            return;
+        const incomingJson = JSON.stringify(incoming);
+        if (incomingJson === lastSavedJsonRef.current)
+            return;
+        lastSavedJsonRef.current = incomingJson;
+        setWorking(hydrateCanvasState(data, fallbackViewport));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+    const flush = useCallback(async () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        const canvas = workingRef.current;
+        // Nothing to persist, or no real target scope yet.
+        if (!canvas || !scope)
+            return;
+        if (creatingRef.current)
+            return;
+        const json = JSON.stringify(canvas);
+        const id = fileIdRef.current ?? createdIdRef.current;
+        const mode = id ? 'update' : 'create';
+        const debug = debugRef.current;
+        if (debug) {
+            console.log('[useAnnotationCanvasDoc] save attempt', {
+                mode,
+                fileId: id,
+                scope,
+                bytes: json.length,
+                strokes: canvas.strokes.length,
+                shapes: canvas.shapes.length,
+                measurements: canvas.placedMeasurements.length,
+            });
+        }
+        // Round-trip through JSON to drop `undefined` keys (e.g. an empty canvas's
+        // viewport.backgroundImage/backgroundFit). Firestore — RN in particular —
+        // rejects undefined field values unless ignoreUndefinedProperties is set.
+        const canvasPayload = JSON.parse(json);
+        setStatus('saving');
+        try {
+            if (!id) {
+                // First save with no file — create the doc seeded with the canvas.
+                creatingRef.current = true;
+                const seed = createSeedRef.current;
+                const newId = await createRef.current({
+                    type: FileUploadType.Canvas,
+                    ...(seed?.name !== undefined ? { name: seed.name } : {}),
+                    fileData: buildFileData(seed?.fileType ?? 'sketch', seed?.isLabel, canvasPayload),
+                });
+                creatingRef.current = false;
+                createdIdRef.current = newId;
+                if (debug) {
+                    console.log('[useAnnotationCanvasDoc] created file', newId);
+                }
+                onFileCreatedRef.current?.(newId);
+            }
+            else {
+                const doc = dataRef.current;
+                await updateRef.current(id, {
+                    fileData: buildFileData(doc?.fileData.fileType ??
+                        createSeedRef.current?.fileType ??
+                        'sketch', doc?.fileData.isLabel ?? createSeedRef.current?.isLabel, canvasPayload),
+                });
+                if (debug) {
+                    console.log('[useAnnotationCanvasDoc] updated file', id);
+                }
+            }
+            lastSavedJsonRef.current = json;
+            // Refresh the file's thumbnail to match what was just saved (fire and
+            // forget — never blocks or fails the save).
+            const savedId = fileIdRef.current ?? createdIdRef.current;
+            if (savedId)
+                void saveThumbnail(savedId);
+            // If new edits landed mid-flight, stay dirty and let the next debounce
+            // (or unmount) flush them.
+            const latest = workingRef.current;
+            if (latest && JSON.stringify(latest) !== json) {
+                setStatus('dirty');
+            }
+            else {
+                setStatus('saved');
+            }
+        }
+        catch (e) {
+            creatingRef.current = false;
+            // Always log save failures with context — these are otherwise invisible
+            // (the canvas keeps working from local state).
+            console.error(`[useAnnotationCanvasDoc] ${mode} failed`, { fileId: id, scope, bytes: json.length }, e);
+            onSaveErrorRef.current?.(e);
+            setStatus('error');
+        }
+    }, [scope, setStatus, saveThumbnail]);
+    const onCommit = useCallback((patch) => {
+        setWorking((prev) => (prev ? applyPatch(prev, patch) : prev));
+        setStatus('dirty');
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            void flush();
+        }, debounceMs);
+    }, [debounceMs, flush, setStatus]);
+    const ensureFileId = useCallback(async () => {
+        const existing = fileIdRef.current ?? createdIdRef.current;
+        if (existing)
+            return existing;
+        // No file yet — seed an empty canvas if nothing has hydrated, then flush
+        // so the existing create branch mints the doc.
+        if (!workingRef.current) {
+            const seeded = createEmptyCanvasState(fallbackViewport);
+            workingRef.current = seeded;
+            setWorking(seeded);
+        }
+        await flush();
+        const id = fileIdRef.current ?? createdIdRef.current;
+        if (!id) {
+            throw new Error('Unable to create annotation file before background upload');
+        }
+        return id;
+    }, [flush, fallbackViewport]);
+    const setBackgroundImage = useCallback(async (blob, dims, fit = 'contain') => {
+        const id = await ensureFileId();
+        const ref = await uploadImage(id, 'background', blob);
+        onCommit({
+            ops: [
+                {
+                    op: 'setViewport',
+                    patch: {
+                        backgroundImage: {
+                            storagePath: ref.storagePath,
+                            downloadUrl: ref.downloadUrl,
+                            widthPx: dims.width,
+                            heightPx: dims.height,
+                        },
+                        backgroundFit: fit,
+                    },
+                },
+            ],
+        });
+    }, [ensureFileId, uploadImage, onCommit]);
+    const clearBackgroundImage = useCallback(async () => {
+        const bg = workingRef.current?.viewport.backgroundImage;
+        const id = fileIdRef.current ?? createdIdRef.current;
+        if (bg && id) {
+            try {
+                await deleteImage(id, bg.storagePath);
+            }
+            catch (e) {
+                // Non-fatal: still clear the viewport reference even if the storage
+                // object is already gone.
+                console.warn('[useAnnotationCanvasDoc] failed to delete background image', e);
+            }
+        }
+        onCommit({
+            ops: [
+                {
+                    op: 'setViewport',
+                    patch: { backgroundImage: undefined, backgroundFit: undefined },
+                },
+            ],
+        });
+    }, [deleteImage, onCommit]);
+    // Flush any pending edits on unmount.
+    useEffect(() => () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+            void flush();
+        }
+    }, [flush]);
+    const canvas = useMemo(() => working ?? createEmptyCanvasState(fallbackViewport), [working, fallbackViewport]);
+    return {
+        canvas,
+        onCommit,
+        loading,
+        error,
+        saveStatus,
+        save: flush,
+        ensureFileId,
+        setBackgroundImage,
+        clearBackgroundImage,
+    };
+};

package/dist/data/hooks/useAnnotationDoc.d.ts

@@ -0,0 +1,7 @@
+import type { AnnotationFile, JobGroupScope } from '../AnnotationDataProvider.js';
+export interface UseAnnotationDocResult {
+    data: AnnotationFile | null;
+    loading: boolean;
+    error: Error | null;
+}
+export declare const useAnnotationDoc: (scope: JobGroupScope | null, fileId: string | null) => UseAnnotationDocResult;

package/dist/data/hooks/useAnnotationDoc.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { useAnnotationData } from '../AnnotationDataContext.js';
+export const useAnnotationDoc = (scope, fileId) => {
+    const provider = useAnnotationData();
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!scope || !fileId) {
+            setData(null);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        const unsubscribe = provider.subscribe(scope, fileId, (doc) => {
+            setData(doc);
+            setLoading(false);
+        }, (err) => {
+            setError(err);
+            setLoading(false);
+        });
+        return unsubscribe;
+    }, [
+        provider,
+        scope?.orgId,
+        scope?.projectId,
+        scope?.jobId,
+        scope?.groupId,
+        fileId,
+    ]);
+    return { data, loading, error };
+};

package/dist/data/hooks/useAnnotationList.d.ts

@@ -0,0 +1,7 @@
+import type { AnnotationFileSummary, JobGroupScope } from '../AnnotationDataProvider.js';
+export interface UseAnnotationListResult {
+    files: AnnotationFileSummary[];
+    loading: boolean;
+    error: Error | null;
+}
+export declare const useAnnotationList: (scope: JobGroupScope | null) => UseAnnotationListResult;

package/dist/data/hooks/useAnnotationList.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { useAnnotationData } from '../AnnotationDataContext.js';
+export const useAnnotationList = (scope) => {
+    const provider = useAnnotationData();
+    const [files, setFiles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!scope) {
+            setFiles([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        const unsubscribe = provider.list(scope, (next) => {
+            setFiles(next);
+            setLoading(false);
+        }, (err) => {
+            setError(err);
+            setLoading(false);
+        });
+        return unsubscribe;
+    }, [provider, scope?.orgId, scope?.projectId, scope?.jobId, scope?.groupId]);
+    return { files, loading, error };
+};

package/dist/data/hooks/useAnnotationMutations.d.ts

@@ -0,0 +1,9 @@
+import type { AnnotationFile, ImageBlob, JobGroupScope, Patch, UploadedImageRef } from '../AnnotationDataProvider.js';
+export interface AnnotationMutations {
+    create(seed: Partial<AnnotationFile>): Promise<string>;
+    update(fileId: string, patch: Patch<AnnotationFile>): Promise<void>;
+    remove(fileId: string): Promise<void>;
+    uploadImage(fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
+    deleteImage(fileId: string, storagePath: string): Promise<void>;
+}
+export declare const useAnnotationMutations: (scope: JobGroupScope) => AnnotationMutations;

package/dist/data/hooks/useAnnotationMutations.js

@@ -0,0 +1,11 @@
+import { useCallback, useMemo } from 'react';
+import { useAnnotationData } from '../AnnotationDataContext.js';
+export const useAnnotationMutations = (scope) => {
+    const provider = useAnnotationData();
+    const create = useCallback((seed) => provider.create(scope, seed), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    const update = useCallback((fileId, patch) => provider.update(scope, fileId, patch), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    const remove = useCallback((fileId) => provider.delete(scope, fileId), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    const uploadImage = useCallback((fileId, role, blob) => provider.uploadImage(scope, fileId, role, blob), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    const deleteImage = useCallback((fileId, storagePath) => provider.deleteImage(scope, fileId, storagePath), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    return useMemo(() => ({ create, update, remove, uploadImage, deleteImage }), [create, update, remove, uploadImage, deleteImage]);
+};

package/dist/exports.d.ts

@@ -7,6 +7,7 @@ export * from './types/firestore.js';
 export * from './types/layout.js';
 export * from './types/annotation.js';
 export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, generateToleranceGradient, createDefaultToleranceThresholds, DEFAULT_TOLERANCE_COLORS, type ToleranceThreshold, type ToleranceConfig, } from './utils/tolerance.js';
+export { GeneralColors, SecondaryColors, FormColors, TileColors, FormulaColors, YellowColors, RedColors, GreenColors, tailwindColors, } from './theme/colors.js';
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, isFormGroupCompleted, } from './utils/groups.js';
 export { ALL_EXPORT_CATEGORIES, ALL_EXPORT_MEASUREMENT_DATA_FIELDS, ALL_EXPORT_OBJECT_TYPES, DEFAULT_EXPORT_CONFIG, EXPORT_EVERYTHING_CONFIG, normalizeExportConfig, type ExportCategory, type ExportConfig, type ExportImageFormat, type ExportMeasurementDataField, type ExportMeasurementFilter, type ExportObjectType, } from './export/config.js';
 export { classifyFileForExport } from './export/objectKinds.js';

package/dist/exports.js

@@ -11,6 +11,8 @@ export * from './types/firestore.js';
 export * from './types/layout.js';
 export * from './types/annotation.js';
 export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, generateToleranceGradient, createDefaultToleranceThresholds, DEFAULT_TOLERANCE_COLORS, } from './utils/tolerance.js';
+// Shared color palette (canonical source for both apps' brand colors).
+export { GeneralColors, SecondaryColors, FormColors, TileColors, FormulaColors, YellowColors, RedColors, GreenColors, tailwindColors, } from './theme/colors.js';
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, isFormGroupCompleted, } from './utils/groups.js';
 // Configurable job CSV export, shared by rock-pro-app and rock-desktop so
 // both platforms emit identical files.

package/dist/hooks/useParseMeasurement.d.ts

@@ -0,0 +1,4 @@
+export declare const useParseMeasurement: () => {
+    parseMeasurementInput: (input: string, defaultUnit?: string) => number | null;
+    error: string | null;
+};

package/dist/hooks/useParseMeasurement.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { parseMeasurement } from '../utils/parseMeasurement.js';
+export const useParseMeasurement = () => {
+    const [error, setError] = useState(null);
+    const parseMeasurementInput = (input, defaultUnit = 'mm') => {
+        setError(null);
+        const result = parseMeasurement(input, defaultUnit);
+        if (result === null) {
+            setError('Invalid measurement. Please provide a valid number and unit.');
+        }
+        return result;
+    };
+    return { parseMeasurementInput, error };
+};

package/dist/theme/colors.d.ts

@@ -0,0 +1,101 @@
+export declare const GeneralColors: {
+    readonly darkGrey: "#1D1F21";
+    readonly grey1: "#2B2C2E";
+    readonly grey2: "#424345";
+    readonly grey3: "#626364";
+    readonly grey4: "#9FA0A2";
+    readonly white: "#FFFFFF";
+};
+export declare const SecondaryColors: {
+    readonly accentBlue1: "#2D3843";
+    readonly accentBlue2: "#2E4C6A";
+    readonly accentBlue3: "#4B6074";
+    readonly accentBlue4: "#67819A";
+};
+export declare const FormColors: {
+    readonly lightGrey1: "#BCBEC2";
+    readonly lightGrey2: "#E8EAED";
+};
+export declare const TileColors: {
+    readonly darkBlue: "#02274B";
+    readonly activeBlue: "#0066FF";
+    readonly lightBlue1: "#50A6FF";
+    readonly lightBlue2: "#89C3FF";
+};
+export declare const FormulaColors: {
+    readonly darkPurple: "#6C155F";
+    readonly purple: "#BD30A8";
+};
+export declare const YellowColors: {
+    readonly mainYellow: "#FFAD00";
+};
+export declare const RedColors: {
+    readonly warningRed: "#DA1100";
+    readonly red: "#E83D2F";
+    readonly mutedRed: "#DF6358";
+};
+export declare const GreenColors: {
+    readonly warningGreen: "#00E920";
+    readonly green: "#58A942";
+    readonly mutedGreen: "#8BB380";
+};
+/**
+ * The palette above shaped for Tailwind's `theme.extend.colors`. Spread it
+ * into the app's tailwind config (works with tailwindcss v3 and NativeWind):
+ *
+ *   import { tailwindColors } from '@reekon-tools/boldr-utils/theme';
+ *   export default {
+ *     theme: { extend: { colors: { ...tailwindColors } } },
+ *   };
+ *
+ * Class names follow the constant names, kebab-cased per group, e.g.
+ * `bg-general-dark-grey`, `text-secondary-accent-blue-1`, `bg-tile-active`,
+ * `border-form-light-grey-2`, `bg-formula`, `text-brand-red-muted`.
+ *
+ * The yellow/red/green groups are namespaced under `brand-*` so they don't
+ * shadow Tailwind's built-in `yellow`/`red`/`green` scales (extend replaces
+ * a color key wholesale, which would break classes like `text-red-500`).
+ */
+export declare const tailwindColors: {
+    readonly general: {
+        readonly 'dark-grey': "#1D1F21";
+        readonly 'grey-1': "#2B2C2E";
+        readonly 'grey-2': "#424345";
+        readonly 'grey-3': "#626364";
+        readonly 'grey-4': "#9FA0A2";
+        readonly white: "#FFFFFF";
+    };
+    readonly secondary: {
+        readonly 'accent-blue-1': "#2D3843";
+        readonly 'accent-blue-2': "#2E4C6A";
+        readonly 'accent-blue-3': "#4B6074";
+        readonly 'accent-blue-4': "#67819A";
+    };
+    readonly form: {
+        readonly 'light-grey-1': "#BCBEC2";
+        readonly 'light-grey-2': "#E8EAED";
+    };
+    readonly tile: {
+        readonly dark: "#02274B";
+        readonly active: "#0066FF";
+        readonly 'light-1': "#50A6FF";
+        readonly 'light-2': "#89C3FF";
+    };
+    readonly formula: {
+        readonly DEFAULT: "#BD30A8";
+        readonly dark: "#6C155F";
+    };
+    readonly 'brand-yellow': {
+        readonly DEFAULT: "#FFAD00";
+    };
+    readonly 'brand-red': {
+        readonly DEFAULT: "#E83D2F";
+        readonly warning: "#DA1100";
+        readonly muted: "#DF6358";
+    };
+    readonly 'brand-green': {
+        readonly DEFAULT: "#58A942";
+        readonly warning: "#00E920";
+        readonly muted: "#8BB380";
+    };
+};

package/dist/theme/colors.js

@@ -0,0 +1,101 @@
+export const GeneralColors = {
+    darkGrey: '#1D1F21',
+    grey1: '#2B2C2E',
+    grey2: '#424345',
+    grey3: '#626364',
+    grey4: '#9FA0A2',
+    white: '#FFFFFF',
+};
+export const SecondaryColors = {
+    accentBlue1: '#2D3843',
+    accentBlue2: '#2E4C6A',
+    accentBlue3: '#4B6074',
+    accentBlue4: '#67819A',
+};
+export const FormColors = {
+    lightGrey1: '#BCBEC2',
+    lightGrey2: '#E8EAED',
+};
+export const TileColors = {
+    darkBlue: '#02274B',
+    activeBlue: '#0066FF',
+    lightBlue1: '#50A6FF',
+    lightBlue2: '#89C3FF',
+};
+export const FormulaColors = {
+    darkPurple: '#6C155F',
+    purple: '#BD30A8',
+};
+export const YellowColors = {
+    mainYellow: '#FFAD00',
+};
+export const RedColors = {
+    warningRed: '#DA1100',
+    red: '#E83D2F',
+    mutedRed: '#DF6358',
+};
+export const GreenColors = {
+    warningGreen: '#00E920',
+    green: '#58A942',
+    mutedGreen: '#8BB380',
+};
+/**
+ * The palette above shaped for Tailwind's `theme.extend.colors`. Spread it
+ * into the app's tailwind config (works with tailwindcss v3 and NativeWind):
+ *
+ *   import { tailwindColors } from '@reekon-tools/boldr-utils/theme';
+ *   export default {
+ *     theme: { extend: { colors: { ...tailwindColors } } },
+ *   };
+ *
+ * Class names follow the constant names, kebab-cased per group, e.g.
+ * `bg-general-dark-grey`, `text-secondary-accent-blue-1`, `bg-tile-active`,
+ * `border-form-light-grey-2`, `bg-formula`, `text-brand-red-muted`.
+ *
+ * The yellow/red/green groups are namespaced under `brand-*` so they don't
+ * shadow Tailwind's built-in `yellow`/`red`/`green` scales (extend replaces
+ * a color key wholesale, which would break classes like `text-red-500`).
+ */
+export const tailwindColors = {
+    general: {
+        'dark-grey': GeneralColors.darkGrey,
+        'grey-1': GeneralColors.grey1,
+        'grey-2': GeneralColors.grey2,
+        'grey-3': GeneralColors.grey3,
+        'grey-4': GeneralColors.grey4,
+        white: GeneralColors.white,
+    },
+    secondary: {
+        'accent-blue-1': SecondaryColors.accentBlue1,
+        'accent-blue-2': SecondaryColors.accentBlue2,
+        'accent-blue-3': SecondaryColors.accentBlue3,
+        'accent-blue-4': SecondaryColors.accentBlue4,
+    },
+    form: {
+        'light-grey-1': FormColors.lightGrey1,
+        'light-grey-2': FormColors.lightGrey2,
+    },
+    tile: {
+        dark: TileColors.darkBlue,
+        active: TileColors.activeBlue,
+        'light-1': TileColors.lightBlue1,
+        'light-2': TileColors.lightBlue2,
+    },
+    formula: {
+        DEFAULT: FormulaColors.purple,
+        dark: FormulaColors.darkPurple,
+    },
+    'brand-yellow': {
+        DEFAULT: YellowColors.mainYellow,
+    },
+    'brand-red': {
+        DEFAULT: RedColors.red,
+        warning: RedColors.warningRed,
+        muted: RedColors.mutedRed,
+    },
+    'brand-green': {
+        DEFAULT: GreenColors.green,
+        warning: GreenColors.warningGreen,
+        muted: GreenColors.mutedGreen,
+    },
+};