@octavius2929-personal/design-system 0.22.1 → 0.23.0

package/dist/index.cjs

@@ -458,7 +458,16 @@ var tintaSchema = {
 var schemas = { tinta: tintaSchema };
 var schemaNames2 = Object.keys(schemas);
 var colorTokenNames = Object.keys(schemas.tinta.light.color);
+function isSchemaName(x) {
+  return typeof x === "string" && Object.hasOwn(schemas, x);
+}
 var modeNames2 = ["light", "dark", "sepia", "contrast"];
+function isMode(x) {
+  return typeof x === "string" && modeNames2.includes(x);
+}
+function isModePreference(x) {
+  return x === "system" || isMode(x);
+}
 var SYSTEM_MODE_PRECEDENCE = [
   { query: "(prefers-contrast: more)", mode: "contrast" },
   { query: "(prefers-color-scheme: dark)", mode: "dark" }
@@ -466,14 +475,36 @@ var SYSTEM_MODE_PRECEDENCE = [
 function resolveMode(preference, systemMode) {
   return preference === "system" ? systemMode : preference;
 }
+function sanitizePersisted(raw) {
+  if (!raw || typeof raw !== "object") return {};
+  const clean = {};
+  if (isSchemaName(raw.schema)) clean.schema = raw.schema;
+  if (isModePreference(raw.preference)) clean.preference = raw.preference;
+  return clean;
+}
 function useThemeStore(options, storage, system) {
   const { defaultSchema = "tinta", defaultMode = "light" } = options;
-  const [persisted] = (0, import_react6.useState)(() => storage.read());
+  const [persisted] = (0, import_react6.useState)(() => sanitizePersisted(storage.read()));
   const [schema, setSchema] = (0, import_react6.useState)(persisted?.schema ?? defaultSchema);
   const [preference, setPreference] = (0, import_react6.useState)(
     persisted?.preference ?? defaultMode
   );
   const [systemMode, setSystemMode] = (0, import_react6.useState)(() => system.get());
+  const [hydrated, setHydrated] = (0, import_react6.useState)(() => !storage.hydrate);
+  (0, import_react6.useEffect)(() => {
+    if (!storage.hydrate) return;
+    let active2 = true;
+    void storage.hydrate().then((raw) => {
+      if (!active2) return;
+      const clean = sanitizePersisted(raw);
+      if (clean.schema) setSchema(clean.schema);
+      if (clean.preference) setPreference(clean.preference);
+      setHydrated(true);
+    });
+    return () => {
+      active2 = false;
+    };
+  }, [storage]);
   (0, import_react6.useEffect)(() => {
     if (preference !== "system") return;
     const update = () => setSystemMode(system.get());
@@ -482,14 +513,17 @@ function useThemeStore(options, storage, system) {
   }, [preference, system]);
   const mode = resolveMode(preference, systemMode);
   (0, import_react6.useEffect)(() => {
+    if (!hydrated) return;
     storage.write({ schema, preference });
-  }, [schema, preference, storage]);
+  }, [schema, preference, storage, hydrated]);
   return (0, import_react6.useMemo)(
     () => ({
       schema,
       mode,
       preference,
-      colorTokens: schemas[schema][mode].color,
+      // Guard defensivo: un schema/modo inesperado (default inválido del caller) cae a
+      // tinta/light en vez de indexar `undefined` y crashear.
+      colorTokens: schemas[schema]?.[mode]?.color ?? schemas.tinta.light.color,
       setSchema,
       setMode: setPreference,
       toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),