@unsetsoft/ryunixjs 1.2.5-canary.11 → 1.2.5-canary.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.2.5-canary.11",
+  "version": "1.2.5-canary.13",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,13 +28,19 @@
       "import": "./jsx/jsx-dev-runtime.js",
       "require": "./jsx/jsx-dev-runtime.js",
       "default": "./jsx/jsx-dev-runtime.js"
-    }
+    },
+    "./style.css": "./styles/ryunix-style.css",
+    "./theme-toggle.css": "./styles/theme-toggle.css",
+    "./layout.css": "./styles/layout.css",
+    "./layout-header.css": "./styles/layout-header.css",
+    "./layout-footer.css": "./styles/layout-footer.css"
   },
   "types": "./types/index.d.ts",
   "files": [
     "dist",
     "jsx",
-    "types"
+    "types",
+    "styles"
   ],
   "type": "module",
   "dependencies": {},
@@ -53,7 +59,7 @@
     "jest-environment-jsdom": "30.2.0"
   },
   "engines": {
-    "node": "20 || ^22 || ^24"
+    "node": "20 || ^22 || ^24 || ^26"
   },
   "keywords": [
     "ryunixjs"
@@ -66,14 +72,15 @@
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build": "rollup -c",
-    "build:lib-ts": "tsc -p tsconfig.emit.json && prettier -w \"src/lib/**/*.js\" \"src/utils/**/*.js\" \"src/main.js\"",
+    "build": "pnpm run build:lib-ts && rollup -c",
+    "build:lib-ts": "tsc -p tsconfig.emit.json && prettier -w \".generated/lib/**/*.js\" \".generated/utils/**/*.js\" \".generated/main.js\"",
     "canary:release": "npm publish --tag canary",
     "release": "npm publish",
     "lint": "eslint src jsx --max-warnings=0 --config ../../eslint.config.mjs",
     "prettier-check": "prettier -c .",
     "prettier-fix": "prettier -w .",
     "test": "jest --testPathPatterns=src",
+    "pretest": "pnpm run build:lib-ts",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "typecheck:checkjs": "tsc --noEmit -p tsconfig.checkjs.json"
   }

package/styles/layout-footer.css

@@ -0,0 +1,313 @@
+/**
+ * Footer chrome — import via layout.css or standalone.
+ * Expects Ryunix semantic tokens (`style: true`) for colors and spacing.
+ */
+
+html:not(.dark) {
+  --ryx-footer-bg: var(--ryx-surface-elevated, #f4f4f5);
+  --ryx-footer-border: var(--ryx-border, #e4e4e7);
+  --ryx-footer-accent: color-mix(
+    in srgb,
+    var(--ryx-link, #2563eb) 30%,
+    transparent
+  );
+  --ryx-footer-glow: color-mix(
+    in srgb,
+    var(--ryx-link, #2563eb) 6%,
+    transparent
+  );
+  --ryx-footer-bottom-border: var(--ryx-border, #e4e4e7);
+  --ryx-footer-link: var(--ryx-text-muted, #52525b);
+  --ryx-footer-link-hover: var(--ryx-text, #18181b);
+}
+
+html.dark {
+  --ryx-footer-bg: #0a0a0b;
+  --ryx-footer-border: #2e2e30;
+  --ryx-footer-accent: rgb(59 130 246 / 0.38);
+  --ryx-footer-glow: rgb(37 99 235 / 0.12);
+  --ryx-footer-bottom-border: #1e1e1e;
+  --ryx-footer-link: #9ca3af;
+  --ryx-footer-link-hover: #ffffff;
+}
+
+.ryx-footer a,
+.ryx-footer-column a,
+.ryx-footer-bottom a {
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.ryx-footer nav ul,
+.ryx-footer-column ul {
+  margin-block: 0;
+}
+
+.ryx-footer-description,
+.ryx-footer-bottom p,
+.ryx-footer-bottom-end p {
+  max-inline-size: none;
+}
+
+.ryx-footer {
+  position: relative;
+  align-self: stretch;
+  inline-size: 100%;
+  max-inline-size: none;
+  box-sizing: border-box;
+  margin-block-start: auto;
+  border-block-start: 1px solid var(--ryx-footer-border);
+  background: var(--ryx-footer-bg);
+  color: var(--ryx-footer-link);
+  overflow: hidden;
+}
+
+.ryx-footer-accent {
+  pointer-events: none;
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 0;
+  block-size: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ryx-footer-accent),
+    transparent
+  );
+}
+
+.ryx-footer-glow {
+  pointer-events: none;
+  position: absolute;
+  inset-block-start: -6rem;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  inline-size: min(100%, 36rem);
+  block-size: 12rem;
+  border-radius: 9999px;
+  background: var(--ryx-footer-glow);
+  filter: blur(80px);
+}
+
+.ryx-footer-inner {
+  position: relative;
+  width: 100%;
+  max-width: var(--ryx-shell-container);
+  margin-inline: auto;
+  padding: clamp(3rem, 6vw, 4rem) var(--ryx-shell-gutter);
+}
+
+.ryx-footer-grid {
+  display: grid;
+  gap: clamp(2rem, 4vw, 2.5rem);
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+}
+
+.ryx-footer-column h3 {
+  margin: 0 0 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6b7280;
+}
+
+html:not(.dark) .ryx-footer-column h3 {
+  color: var(--ryx-text-subtle, #71717a);
+}
+
+.ryx-footer-column ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ryx-footer-column a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  text-decoration: none;
+  color: var(--ryx-footer-link);
+  transition: color 180ms ease;
+}
+
+.ryx-footer-column a:hover {
+  color: var(--ryx-footer-link-hover);
+}
+
+.ryx-footer-brand-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.ryx-footer-brand {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ryx-footer-brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: fit-content;
+  text-decoration: none;
+  color: inherit;
+  font-weight: 700;
+  min-width: 0;
+  transition: opacity 200ms ease;
+}
+
+.ryx-footer-brand-link:hover {
+  opacity: 1;
+}
+
+.ryx-footer-brand-image {
+  width: 2.25rem;
+  height: 2.25rem;
+  object-fit: contain;
+  flex-shrink: 0;
+  border-radius: var(--ryx-radius-md, 0.375rem);
+  opacity: 0.92;
+}
+
+.ryx-footer-brand-link:hover .ryx-footer-brand-image {
+  opacity: 1;
+}
+
+.ryx-footer-brand-title {
+  font-size: 1.125rem;
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: linear-gradient(90deg, #60a5fa, #a78bfa);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+html:not(.dark) .ryx-footer-brand-title {
+  background: linear-gradient(
+    90deg,
+    var(--ryx-link, #2563eb),
+    var(--ryx-accent, #7c3aed)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.ryx-footer-description {
+  margin: 0;
+  max-inline-size: 28rem;
+  font-size: 0.875rem;
+  line-height: 1.625;
+  color: #6b7280;
+  text-wrap: pretty;
+}
+
+html:not(.dark) .ryx-footer-description {
+  color: var(--ryx-text-subtle, #71717a);
+}
+
+.ryx-footer-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-block-start: clamp(2rem, 4vw, 3rem);
+  padding-block-start: clamp(1.5rem, 3vw, 2rem);
+  border-block-start: 1px solid var(--ryx-footer-bottom-border);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: #6b7280;
+}
+
+html:not(.dark) .ryx-footer-bottom {
+  color: var(--ryx-text-subtle, #71717a);
+}
+
+.ryx-footer-bottom-start,
+.ryx-footer-bottom-end {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.ryx-footer-bottom-end {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+
+.ryx-footer-bottom-end p {
+  margin: 0;
+  max-inline-size: none;
+  font-size: inherit;
+  color: inherit;
+}
+
+.ryx-footer-bottom-end code {
+  font-size: 0.85em;
+}
+
+@media (min-width: 640px) {
+  .ryx-footer-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ryx-footer-brand-column {
+    grid-column: 1 / -1;
+  }
+
+  .ryx-footer-bottom {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .ryx-footer-bottom-end {
+    align-items: flex-end;
+    text-align: end;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ryx-footer-grid {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 2rem;
+  }
+
+  .ryx-footer-brand-column {
+    grid-column: span 5;
+  }
+
+  .ryx-footer-column:nth-child(2) {
+    grid-column: 7 / span 3;
+  }
+
+  .ryx-footer-column:nth-child(3) {
+    grid-column: span 2;
+  }
+
+  .ryx-footer-column:nth-child(n + 4) {
+    grid-column: span 2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ryx-footer-brand-link,
+  .ryx-footer-column a {
+    transition: none;
+  }
+}

package/styles/layout-header.css

@@ -0,0 +1,239 @@
+/**
+ * Header chrome — import via layout.css or standalone.
+ * Expects Ryunix semantic tokens (`style: true`) for colors and spacing.
+ */
+
+html:not(.dark) {
+  --ryx-header-height: 4rem;
+  --ryx-header-bg: color-mix(
+    in srgb,
+    var(--ryx-surface, #ffffff) 92%,
+    transparent
+  );
+  --ryx-header-border: var(--ryx-border, #e4e4e7);
+  --ryx-header-shadow: 0 1px 0 rgb(15 23 42 / 0.04);
+  --ryx-header-nav-text: var(--ryx-text-muted, #52525b);
+  --ryx-header-nav-hover-bg: color-mix(
+    in srgb,
+    var(--ryx-accent, #7c3aed) 10%,
+    transparent
+  );
+  --ryx-header-nav-hover-border: color-mix(
+    in srgb,
+    var(--ryx-accent, #7c3aed) 24%,
+    transparent
+  );
+  --ryx-header-nav-hover-text: var(--ryx-text, #18181b);
+  --ryx-header-brand-hover-bg: color-mix(
+    in srgb,
+    var(--ryx-accent, #7c3aed) 8%,
+    transparent
+  );
+  --ryx-header-brand-hover-border: color-mix(
+    in srgb,
+    var(--ryx-accent, #7c3aed) 18%,
+    transparent
+  );
+}
+
+html.dark {
+  --ryx-header-height: 4rem;
+  --ryx-header-bg: rgb(17 17 18 / 0.82);
+  --ryx-header-border: #2e2e30;
+  --ryx-header-shadow: 0 1px 0 rgb(255 255 255 / 0.04);
+  --ryx-header-nav-text: #d4d4d8;
+  --ryx-header-nav-hover-bg: rgb(139 92 246 / 0.18);
+  --ryx-header-nav-hover-border: rgb(167 139 250 / 0.32);
+  --ryx-header-nav-hover-text: #ffffff;
+  --ryx-header-brand-hover-bg: rgb(139 92 246 / 0.14);
+  --ryx-header-brand-hover-border: rgb(167 139 250 / 0.22);
+}
+
+.ryx-header a,
+.ryx-header-end a {
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.ryx-header nav ul {
+  margin-block: 0;
+}
+
+.ryx-header {
+  position: relative;
+  z-index: 100;
+  align-self: stretch;
+  inline-size: 100%;
+  max-inline-size: none;
+  box-sizing: border-box;
+  border-block-end: 1px solid var(--ryx-header-border);
+  background: var(--ryx-header-bg);
+  color: var(--ryx-text);
+  box-shadow: var(--ryx-header-shadow);
+}
+
+.ryx-header--sticky {
+  position: sticky;
+  inset-block-start: 0;
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+}
+
+.ryx-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ryx-space-4, 1rem);
+  width: 100%;
+  max-width: var(--ryx-shell-container);
+  height: var(--ryx-header-height);
+  margin-inline: auto;
+  padding-inline: var(--ryx-shell-gutter);
+}
+
+.ryx-header-start {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.ryx-header-brand {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ryx-header-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: var(--ryx-space-4, 1rem);
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.ryx-header-brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+  text-decoration: none;
+  color: inherit;
+  font-weight: 700;
+  min-width: 0;
+  transition:
+    background-color 200ms ease,
+    border-color 200ms ease,
+    color 200ms ease;
+}
+
+.ryx-header-brand-link:hover {
+  background: var(--ryx-header-brand-hover-bg);
+  border-color: var(--ryx-header-brand-hover-border);
+}
+
+.ryx-header-brand-image {
+  width: 2.25rem;
+  height: 2.25rem;
+  object-fit: contain;
+  flex-shrink: 0;
+  border-radius: var(--ryx-radius-md, 0.375rem);
+}
+
+.ryx-header-brand-title {
+  font-size: 1.25rem;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: linear-gradient(90deg, #60a5fa, #a78bfa);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+html:not(.dark) .ryx-header-brand-title {
+  background: linear-gradient(
+    90deg,
+    var(--ryx-link, #2563eb),
+    var(--ryx-accent, #7c3aed)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.ryx-header-end nav ul {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ryx-header-end nav a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  text-decoration: none;
+  color: var(--ryx-header-nav-text);
+  white-space: nowrap;
+  transition:
+    color 200ms ease,
+    background-color 200ms ease,
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+.ryx-header-end nav a:hover {
+  color: var(--ryx-header-nav-hover-text);
+  background: var(--ryx-header-nav-hover-bg);
+  border-color: var(--ryx-header-nav-hover-border);
+  box-shadow: 0 0 20px rgb(139 92 246 / 0.18);
+}
+
+.ryx-header-end > .ryx-theme-segment {
+  flex-shrink: 0;
+}
+
+@media (max-width: 767px) {
+  .ryx-header-inner {
+    height: auto;
+    min-height: var(--ryx-header-height);
+    padding-block: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .ryx-header-start,
+  .ryx-header-end {
+    flex: 1 1 100%;
+  }
+
+  .ryx-header-end {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .ryx-header-end nav ul {
+    flex-wrap: wrap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ryx-header-brand-link,
+  .ryx-header-end nav a {
+    transition: none;
+  }
+}

package/styles/layout.css

@@ -0,0 +1,76 @@
+/**
+ * Header / Main / Footer layout shell — import alongside app styles.
+ * Expects Ryunix semantic tokens (`style: true`) for colors and spacing.
+ */
+
+@import './layout-header.css';
+@import './layout-footer.css';
+
+html:not(.dark):has(.ryx-header),
+html.dark:has(.ryx-header),
+html:not(.dark):has(.ryx-footer),
+html.dark:has(.ryx-footer),
+html:not(.dark):has(.ryx-main),
+html.dark:has(.ryx-main) {
+  width: 100%;
+  max-width: none;
+}
+
+/* --- Shell tokens (webpack1 / ryunix-doc palette) --- */
+
+html:not(.dark) {
+  --ryx-shell-bg: var(--ryx-bg, #fafafa);
+  --ryx-shell-main-bg: var(--ryx-bg, #fafafa);
+  --ryx-shell-container: 80rem;
+  --ryx-shell-gutter: var(--ryx-page-padding, 1.5rem);
+}
+
+html.dark {
+  --ryx-shell-bg: #111112;
+  --ryx-shell-main-bg: #111112;
+  --ryx-shell-container: 80rem;
+  --ryx-shell-gutter: var(--ryx-page-padding, 1.5rem);
+}
+
+/* Shell: body sin padding; header/footer a ancho completo */
+html:not(.dark) body:has(.ryx-header),
+html.dark body:has(.ryx-header),
+html:not(.dark) body:has(.ryx-footer),
+html.dark body:has(.ryx-footer),
+html:not(.dark) body:has(.ryx-main),
+html.dark body:has(.ryx-main) {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: none;
+  background-color: var(--ryx-shell-bg);
+}
+
+html:not(.dark) #__ryunix,
+html.dark #__ryunix {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: none;
+  min-height: 100vh;
+  background-color: var(--ryx-shell-bg);
+}
+
+/* --- Main --- */
+
+.ryx-main {
+  flex: 1 1 auto;
+  align-self: stretch;
+  inline-size: 100%;
+  max-inline-size: none;
+  background: var(--ryx-shell-main-bg);
+  color: var(--ryx-text);
+}
+
+.ryx-main-inner {
+  width: 100%;
+  max-width: var(--ryx-shell-container);
+  margin-inline: auto;
+  padding: var(--ryx-page-padding, 1.5rem);
+}