@veams/status-quo 1.5.1 → 1.7.0

package/src/store/base-state-handler.ts

@@ -1,22 +1,17 @@
-import { withDevTools } from './dev-tools.js';
+import { resolveDevToolsOptions } from '../config/status-quo-config.js';
 import { createSelectorCache, selectWithCache } from '../utils/selector-cache.js';
+import { withDevTools } from './dev-tools.js';
 
 import type { StateSubscriptionHandler } from '../types/types.js';
-import type { DevTools, MessagePayload } from './dev-tools.js';
 import type { EqualityFn, Selector } from '../utils/selector-cache.js';
-
-type DevToolsOptions = {
-  enabled?: boolean;
-  namespace: string;
-};
+import type { DevTools, MessagePayload } from './dev-tools.js';
+import type { DevToolsOptions } from '../config/status-quo-config.js';
 
 type Subscribable<T> = {
   subscribe: (listener: (value: T) => void) => () => void;
   getSnapshot?: () => T;
 };
 
-const defaultDevToolsOptions = { enabled: false, namespace: 'Store' };
-
 const devToolsFeatures = {
   pause: true,
   lock: true,
@@ -41,19 +36,18 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
   }
 
   protected initDevTools(devToolsOptions?: DevToolsOptions) {
-    const mergedOptions = {
-      ...defaultDevToolsOptions,
-      ...devToolsOptions,
-    };
+    const resolvedOptions = resolveDevToolsOptions(devToolsOptions);
 
-    if (!mergedOptions.enabled) {
+    if (!resolvedOptions.enabled) {
       this.devTools = null;
       return;
     }
 
+    const namespace = devToolsOptions?.namespace ?? this.getDevToolsNamespace();
+
     this.devTools = withDevTools(this.initialState, {
-      name: mergedOptions.namespace,
-      instanceId: mergedOptions.namespace.toLowerCase().replaceAll(' ', '-'),
+      name: namespace,
+      instanceId: namespace.toLowerCase().replaceAll(' ', '-'),
       actionCreators: this.getActions(),
       features: devToolsFeatures,
     });
@@ -86,23 +80,24 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
   protected abstract getStateValue(): S;
   protected abstract setStateValue(nextState: S): void;
 
+  protected getDevToolsNamespace() {
+    return this.constructor.name || 'Store';
+  }
+
   protected bindSubscribable<T, Sel>(
     service: Subscribable<T>,
     onChange: (value: Sel) => void,
     selector: Selector<T, Sel>,
     isEqual?: EqualityFn<Sel>
   ): void;
-  protected bindSubscribable<T>(
-    service: Subscribable<T>,
-    onChange: (value: T) => void
-  ): void;
+  protected bindSubscribable<T>(service: Subscribable<T>, onChange: (value: T) => void): void;
   protected bindSubscribable<T, Sel = T>(
     service: Subscribable<T>,
     onChange: (value: Sel) => void,
     selector?: Selector<T, Sel>,
     isEqual: EqualityFn<Sel> = Object.is
   ) {
-    const selectorFn = (selector ?? ((value: T) => value as unknown as Sel)) as Selector<T, Sel>;
+    const selectorFn = (selector ?? ((value: T) => value as unknown as Sel));
     const selectorCache = createSelectorCache<Sel>();
     let receivedSyncValue = false;
 
@@ -150,7 +145,7 @@ export abstract class BaseStateHandler<S, A> implements StateSubscriptionHandler
 
       case 'JUMP_TO_STATE':
       case 'JUMP_TO_ACTION':
-        this.setStateValue(JSON.parse(message.state));
+        this.setStateValue(JSON.parse(message.state) as S);
         break;
 
       default:

package/src/store/dev-tools.ts

@@ -28,17 +28,17 @@ export function withDevTools<S>(initialState: S, options = {}): DevTools | null
     return null;
   }
 
-  // eslint-disable-next-line no-underscore-dangle
+   
   if (!window.__REDUX_DEVTOOLS_EXTENSION__) {
     console.error('Status Quo :: Devtools Extension is not installed!');
     return null;
   }
 
-  // eslint-disable-next-line no-underscore-dangle
+   
   const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(options);
 
   devTools.init(initialState);
 
-  // eslint-disable-next-line consistent-return
+   
   return devTools;
 }

package/src/store/observable-state-handler.ts

@@ -1,18 +1,15 @@
 import { BehaviorSubject, distinctUntilChanged, distinctUntilKeyChanged, map } from 'rxjs';
 
-import { BaseStateHandler } from './base-state-handler.js';
 import { resolveDistinctOptions } from '../config/status-quo-config.js';
+import { BaseStateHandler } from './base-state-handler.js';
 
+import type { DevToolsOptions, DistinctOptions } from '../config/status-quo-config.js';
 import type { Observable } from 'rxjs';
-import type { DistinctOptions } from '../config/status-quo-config.js';
 
 type ObservableStateHandlerProps<S> = {
   initialState: S;
   options?: {
-    devTools?: {
-      enabled?: boolean;
-      namespace: string;
-    };
+    devTools?: DevToolsOptions;
     distinct?: DistinctOptions<S>;
     useDistinctUntilChanged?: boolean;
   };
@@ -27,7 +24,10 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
   protected constructor({ initialState, options }: ObservableStateHandlerProps<S>) {
     super(initialState);
     this.state$ = new BehaviorSubject<S>(initialState);
-    this.distinctOptions = resolveDistinctOptions(options?.distinct, options?.useDistinctUntilChanged);
+    this.distinctOptions = resolveDistinctOptions(
+      options?.distinct,
+      options?.useDistinctUntilChanged
+    );
     this.initDevTools(options?.devTools);
   }
 
@@ -39,16 +39,15 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
     this.state$.next(nextState);
   }
 
-  getStateItemAsObservable(key: keyof S) {
+  getObservableItem<K extends keyof S>(key: K): Observable<S[K]> {
     return this.state$.pipe(
       distinctUntilKeyChanged(key),
       map((state) => state[key])
     );
   }
 
-  getStateAsObservable(options: StateObservableOptions = {}) {
-    const useDistinctUntilChanged =
-      options.useDistinctUntilChanged ?? this.distinctOptions.enabled;
+  getObservable(options: StateObservableOptions = {}): Observable<S> {
+    const useDistinctUntilChanged = options.useDistinctUntilChanged ?? this.distinctOptions.enabled;
 
     if (!useDistinctUntilChanged) {
       return this.state$;
@@ -58,22 +57,13 @@ export abstract class ObservableStateHandler<S, A> extends BaseStateHandler<S, A
       distinctUntilChanged((previous, next) => {
         return this.distinctOptions.comparator(previous, next);
       })
-    ) as Observable<S>;
-  }
-
-  getObservable(key: keyof S) {
-    return this.getStateItemAsObservable(key);
-  }
-
-  /** @deprecated Use getObservable instead. */
-  getObservableItem(key: keyof S) {
-    return this.getObservable(key);
+    );
   }
 
   subscribe(listener: () => void): () => void;
   subscribe(listener: (value: S) => void): () => void;
   subscribe(listener: (value: S) => void) {
-    const subscription = this.getStateAsObservable().subscribe((nextState) => {
+    const subscription = this.getObservable().subscribe((nextState) => {
       listener(nextState);
     });
     return () => subscription.unsubscribe();

package/src/store/signal-state-handler.ts

@@ -1,18 +1,15 @@
 import { signal } from '@preact/signals-core';
 
-import { BaseStateHandler } from './base-state-handler.js';
 import { resolveDistinctOptions } from '../config/status-quo-config.js';
+import { BaseStateHandler } from './base-state-handler.js';
 
+import type { DevToolsOptions, DistinctOptions } from '../config/status-quo-config.js';
 import type { Signal } from '@preact/signals-core';
-import type { DistinctOptions } from '../config/status-quo-config.js';
 
 type SignalStateHandlerProps<S> = {
   initialState: S;
   options?: {
-    devTools?: {
-      enabled?: boolean;
-      namespace: string;
-    };
+    devTools?: DevToolsOptions;
     distinct?: DistinctOptions<S>;
     useDistinctUntilChanged?: boolean;
   };
@@ -26,7 +23,10 @@ export abstract class SignalStateHandler<S, A> extends BaseStateHandler<S, A> {
     super(initialState);
 
     this.state = signal<S>(initialState);
-    this.distinctOptions = resolveDistinctOptions(options?.distinct, options?.useDistinctUntilChanged);
+    this.distinctOptions = resolveDistinctOptions(
+      options?.distinct,
+      options?.useDistinctUntilChanged
+    );
     this.initDevTools(options?.devTools);
   }
 
@@ -48,7 +48,10 @@ export abstract class SignalStateHandler<S, A> extends BaseStateHandler<S, A> {
         return;
       }
 
-      if (this.distinctOptions.enabled && this.distinctOptions.comparator(previousSnapshot, nextState)) {
+      if (
+        this.distinctOptions.enabled &&
+        this.distinctOptions.comparator(previousSnapshot, nextState)
+      ) {
         previousSnapshot = nextState;
         return;
       }

package/src/store/state-singleton.ts

@@ -10,7 +10,7 @@ export interface StateSingletonOptions {
 
 export function makeStateSingleton<S, A>(
   stateHandlerFactory: () => StateSubscriptionHandler<S, A>,
-  { destroyOnNoConsumers = true }: StateSingletonOptions = {}
+  { destroyOnNoConsumers = false }: StateSingletonOptions = {}
 ): StateSingleton<S, A> {
   let instance: StateSubscriptionHandler<S, A> | null = null;
   const singleton: StateSingleton<S, A> & {

package/tsconfig.json

@@ -24,9 +24,8 @@
     "declarationDir": "dist",
     "outDir": "dist",
     "typeRoots": [
-      "node",
-      "node_modules/@types",
-      "node_modules/@redux-devtools/extension"
+      "../../node_modules/@types",
+      "../../node_modules/@redux-devtools/extension"
     ],
     "jsx": "react"
   },

package/.eslintrc.cjs

@@ -1,132 +0,0 @@
-module.exports = {
-    root: true,
-    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-    plugins: ['react', '@typescript-eslint', 'simple-import-sort'],
-    ignorePatterns: [
-        '.eslintrc.js',
-        '*.config.js',
-        'setupTests.js',
-        'setupTests.ts',
-        'env.js',
-        'env.local.js',
-    ],
-    extends: [
-        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
-        'airbnb-base',
-        'airbnb-typescript/base',
-        'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-        'plugin:react/recommended',
-        'airbnb',
-        'airbnb/hooks',
-        'airbnb-typescript',
-        // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors.
-        // Make sure this is always the last configuration in the extends array.
-        'plugin:prettier/recommended',
-    ],
-    parserOptions: {
-        project: './tsconfig.json',
-        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-        sourceType: 'module', // Allows for the use of imports
-        ecmaFeatures: {
-            jsx: true, // Allows for the parsing of JSX
-        },
-    },
-    settings: {
-        react: {
-            version: 'detect', // React version. "detect" automatically picks the version you have installed.
-        },
-    },
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-    rules: {
-        'max-classes-per-file': ['error', 2],
-        'no-console': 'off',
-        '@typescript-eslint/consistent-type-imports': 'error',
-        'no-param-reassign': ['error', {props: false}], // for reducer and simple reference changes
-        'import/order': 'off', // Is handled by simple-import-sort
-        'import/prefer-default-export': 'off', // This is not really useful, because named exports are easier to import (IDE)
-        'import/no-default-export': 'error', // Prefer named exports over default exports since they are easier to find and refactor
-        'import/extensions': [
-            'error',
-            'always',
-            {
-                ignorePackages: true,
-                js: 'always',
-            },
-        ],
-        'simple-import-sort/exports': 'error',
-        'simple-import-sort/imports': [
-            'error',
-            {
-                /**
-                 * The default grouping, but with type imports last as a separate group.
-                 * From https://github.com/lydell/eslint-plugin-simple-import-sort/blob/37f9448cdfed85dacf27e34c515653ff96f0377a/examples/.eslintrc.js.
-                 */
-                groups: [['^\\u0000'], ['^@?\\w'], ['^'], ['^\\.'], ['^.+\\u0000$']],
-            },
-        ],
-        '@typescript-eslint/no-use-before-define': ['error', {functions: false}], // function declarations are always
-        // hoisted so it's safe
-        '@typescript-eslint/lines-between-class-members': [
-            'error',
-            'always',
-            {exceptAfterSingleLine: true},
-        ], // Avoid blowing up classes
-
-        // Forbid the use of extraneous packages
-        // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
-        // paths are treated both as absolute paths, and relative to process.cwd()
-        'import/no-extraneous-dependencies': [
-            'error',
-            {
-                devDependencies: [
-                    '**/setupTests.{js,ts}', // test setup files
-                    'test/**', // tape, common npm pattern
-                    'tests/**', // also common npm pattern
-                    'spec/**', // mocha, rspec-like pattern
-                    '**/__tests__/**', // jest pattern
-                    '**/__mocks__/**', // jest pattern
-                    'test.{js,jsx}', // repos with a single test file
-                    'test-*.{js,jsx}', // repos with multiple top-level test files
-                    '**/*{.,_}{test,spec}.{js,jsx}', // tests where the extension or filename suffix denotes that it is a test
-                    '**/jest.config.js', // jest config
-                    '**/jest.setup.js', // jest setup
-                    '**/vue.config.js', // vue-cli config
-                    '**/webpack.config.js', // webpack config
-                    '**/webpack.config.*.js', // webpack config
-                    '**/rollup.config.js', // rollup config
-                    '**/rollup.config.*.js', // rollup config
-                    '**/gulpfile.js', // gulp config
-                    '**/gulpfile.*.js', // gulp config
-                    '**/Gruntfile{,.js}', // grunt config
-                    '**/protractor.conf.js', // protractor config
-                    '**/protractor.conf.*.js', // protractor config
-                    '**/karma.conf.js', // karma config
-                    '**/.eslintrc.js', // eslint config
-                ],
-                optionalDependencies: false,
-            },
-        ],
-        'react/prop-types': 'off', // Since we do not use prop-types
-        'react/require-default-props': 'off', // Since we do not use prop-types
-        // Many of our loops are server side rendered, so we can rely on the index in general
-        'react/no-array-index-key': 0,
-        // To support hydration of components, a string is necessary so that the minification of bundles
-        // do not affect our markup generation on the server.
-        'react/display-name': [2, {ignoreTranspilerName: true}],
-        // aria roles ignored (0) instead of warning (1) / errors (2).
-        'jsx-a11y/role-supports-aria-props': 0,
-        'react/function-component-definition': [2, {namedComponents: 'arrow-function'}],
-        // Conditional spreads are easier to do so we can deactivate this rule
-        'react/jsx-props-no-spreading': 0,
-        // Enforce the definition of Fragment instead of shorthand syntax.
-        // The thing is, that keys can only be applied to the long version. So we should stick to one version.
-        'react/jsx-fragments': [2, 'element'],
-        // We need to use setDangerouslyInnerHtml for article and server side rendered markup prepared by external helpers.
-        // So it makes no sense to have this rule in place.
-        'react/no-danger': 0,
-        // strict null-checking is not necessary.
-        // The syntax itself should be avoided for sure but in some cases where we know we get the data,
-        // we can use this functionality
-        '@typescript-eslint/no-non-null-assertion': 0,
-    },
-};

package/.github/workflows/pages.yml

@@ -1,46 +0,0 @@
-name: Deploy Docs
-
-on:
-  push:
-    branches: [master]
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: pages
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Build docs
-        run: npm run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./docs
-
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.github/workflows/release.yml

@@ -1,33 +0,0 @@
-name: Release
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-permissions:
-  contents: write
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-      - name: Install dependencies
-        run: npm ci
-      - name: Build dist
-        run: npm run build
-      - name: Package dist
-        run: |
-          zip -r "dist-${{ github.ref_name }}.zip" dist
-      - name: Create GitHub release
-        uses: softprops/action-gh-release@v2
-        with:
-          files: dist-${{ github.ref_name }}.zip
-          generate_release_notes: true

package/.nvmrc

@@ -1 +0,0 @@
-v22

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "useTabs": false,
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "semi": true
-}

package/docs/assets/index-BBmpszOW.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}:root{color-scheme:light;--bg: #f3f2ee;--bg-strong: #e6e1d8;--card: #ffffff;--ink: #1b1b1f;--muted: #5c5c66;--accent: #2f6bff;--accent-soft: #c9d8ff;--accent-2: #ff9f1c;--shadow: 0 18px 45px -30px rgba(0, 0, 0, .45);--radius-lg: 28px;--radius-md: 18px;--radius-sm: 12px;--panel-dark: #0e1116;font-family:Space Grotesk,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 20%,rgba(47,107,255,.18),transparent 55%),radial-gradient(circle at 80% 0%,rgba(255,159,28,.2),transparent 50%),linear-gradient(160deg,var(--bg),var(--bg-strong))}#root{min-height:100vh}.app{max-width:1100px;margin:0 auto;padding:56px 28px 72px;display:flex;flex-direction:column;gap:40px}.brand-bar{display:inline-flex;align-items:center;gap:10px;font-weight:600;justify-content:center;width:100%}.brand-logo{width:260px;height:auto;display:block}.nav{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:10px 6px;width:100%}.nav-toggle{display:none;border:1px solid rgba(27,27,31,.18);background:#ffffffd9;color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}.nav-links{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:6px 12px;width:min(100%,980px);background:#ffffffb3;border-radius:999px;border:1px solid rgba(27,27,31,.1);box-shadow:var(--shadow)}.nav-links a{text-decoration:none;color:var(--ink);font-weight:500;padding:6px 12px;border-radius:999px;transition:background .2s ease,color .2s ease}.nav-links a:hover{background:#2f6bff1f;color:var(--accent)}.hero{display:grid;gap:16px;padding:32px 34px;background:#ffffffbf;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid rgba(27,27,31,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fade-up .6s ease both}.hero.intro{gap:18px}h1{font-size:clamp(2rem,1.6vw + 1.4rem,2.8rem);line-height:1.15;margin:0}h2{margin:0;font-size:1.4rem}h3{margin:0 0 8px}p{margin:0;color:var(--muted);line-height:1.6}p span{font-family:monospace;font-weight:700;font-size:.9rem}.muted{color:var(--muted)}.eyebrow{font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--muted);margin-bottom:10px}.subtext{max-width:600px}.hero .subtext{margin-top:12px}.hero .subtext+.subtext{margin-top:10px}.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}.doc-section{display:grid;gap:18px;padding:28px;border-radius:var(--radius-md);background:#ffffffd9;border:1px solid rgba(27,27,31,.08);box-shadow:var(--shadow)}.doc-copy{display:grid;gap:10px}.doc-snippets{display:grid;gap:12px}.singleton-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}.singleton-card{background:#fff;border-radius:var(--radius-md);padding:22px;border:1px solid rgba(27,27,31,.08);box-shadow:var(--shadow);display:grid;gap:14px;align-content:start;height:100%}.singleton-count{font-size:2.4rem;font-weight:700;color:var(--ink);background:var(--bg-strong);border-radius:var(--radius-sm);padding:10px 16px;width:fit-content}.singleton-count.highlight{background:#2f6bff29;color:var(--accent)}.singleton-hint{font-size:.85rem;color:var(--muted)}.guide{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}.api-flow{display:grid;gap:30px}.api-group{display:grid;gap:18px}.api-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.api-composition-card{padding:2px 0 18px;border-bottom:1px solid rgba(27,27,31,.16);display:grid;gap:10px;align-content:start}.api-composition-card h3{margin:0;font-size:1rem}.api-composition-punch{margin-top:8px;font-weight:600;color:var(--ink);background:linear-gradient(120deg,#2f6bff24,#ff9f1c24);border:1px solid rgba(47,107,255,.2);border-radius:var(--radius-sm);padding:10px 12px}.api-card{background:#fff;border-radius:var(--radius-sm);padding:18px;border:1px solid rgba(27,27,31,.08);box-shadow:var(--shadow);display:grid;gap:10px;align-content:start;height:100%}.api-card h3{margin:0;font-size:1rem}.api-card-wide{grid-column:1 / -1}.philosophy-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}.philosophy-card{background:#fff;border-radius:var(--radius-md);border:1px solid rgba(27,27,31,.08);box-shadow:var(--shadow);overflow:hidden;display:grid;gap:16px;align-content:start;height:100%}.philosophy-card img{width:100%;height:190px;object-fit:cover;background:var(--panel-dark)}.philosophy-card div{padding:0 20px 22px;display:grid;gap:8px}.guide-card{background:#ffffffd9;border-radius:var(--radius-md);padding:22px;border:1px solid rgba(27,27,31,.08);box-shadow:var(--shadow);display:grid;gap:16px;align-content:start;height:100%}.guide-highlight{margin-top:4px;font-weight:600;color:var(--ink);background:linear-gradient(120deg,#2f6bff29,#ff9f1c29);border:1px solid rgba(47,107,255,.2);border-radius:var(--radius-sm);padding:10px 12px}.code-block.compact{font-size:.75rem;padding:12px 14px}.card{background:var(--card);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow);border:1px solid rgba(27,27,31,.08);display:flex;flex-direction:column;gap:20px;animation:fade-up .6s ease both;height:100%}.card:nth-child(2){animation-delay:.1s}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.count-chip{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 14px;font-weight:600;font-size:1rem}.count-display{display:grid;gap:8px;padding:16px;border-radius:var(--radius-sm);background:linear-gradient(120deg,#2f6bff1a,#ff9f1c14)}.code-block{margin:0;padding:16px 18px;border-radius:var(--radius-sm);background:#12131a;color:#f0f2ff;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto;box-shadow:inset 0 0 0 1px #ffffff14}.code-block code{font-family:inherit}.count-label{font-size:.85rem;color:var(--muted)}.count-value{font-size:2.6rem;font-weight:700}.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.btn{border:1px solid rgba(27,27,31,.18);border-radius:999px;padding:10px 14px;font:inherit;background:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border .2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -14px #1b1b1f66}.btn.primary{background:var(--accent);color:#fff;border-color:transparent}.btn.ghost{background:transparent;color:var(--ink)}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 720px){.app{padding:40px 20px 60px}.nav{padding:0}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}.nav-links{display:none;width:100%;border-radius:var(--radius-md);padding:10px;gap:8px}.nav-links.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links a{text-align:center}.doc-section{padding:22px}.api-grid{grid-template-columns:1fr}.hero{padding:26px}.footer-card{flex-direction:column;align-items:flex-start}}