@taylorvance/tv-shared-runtime

@taylorvance/tv-shared-runtime

Shared React runtime primitives for Taylor Vance portfolio projects.

The canonical TV Programs logo files live in the repo-level assets/ directory and are copied into this package during build so the package can continue to expose raw asset subpaths.

Public API

Root exports:

• BrandBadge
• TvProgramsMark
• TVPROGRAMS_URL
• TVPROGRAMS_HOSTNAME
• TVPROGRAMS_DEFAULT_LABEL
• brandBadgeClassNames
• createProjectStorage

Explicit subpaths:

• @taylorvance/tv-shared-runtime/BrandBadge
• @taylorvance/tv-shared-runtime/assets
• @taylorvance/tv-shared-runtime/storage
• @taylorvance/tv-shared-runtime/storage-dev

Design goals

• Keep primitives small and stable.
• Stay CSS-agnostic by default.
• Work in utility-class and plain-CSS apps.
• Prefer composition and slot hooks over opinionated app styling.

BrandBadge

Quick default usage:

import { BrandBadge } from '@taylorvance/tv-shared-runtime';

export function Footer() {
  return <BrandBadge />;
}

Explicit component-only entry:

import { BrandBadge } from '@taylorvance/tv-shared-runtime/BrandBadge';

Consumer-owned styling:

import { BrandBadge } from '@taylorvance/tv-shared-runtime';

export function Footer() {
  return (
    <BrandBadge
      className="brand-badge"
      iconClassName="brand-badge-icon"
      labelClassName="brand-badge-label"
      unstyled
    />
  );
}

Logo assets

React component:

import { TvProgramsMark } from '@taylorvance/tv-shared-runtime';

URL exports:

import { TVPROGRAMS_MARK_SVG_URL } from '@taylorvance/tv-shared-runtime/assets';

Raw asset subpaths:

import tvMarkUrl from '@taylorvance/tv-shared-runtime/tv.svg';

Project storage

Use createProjectStorage when a consumer needs browser localStorage keys that stay unique per project on shared origins such as localhost.

import { createProjectStorage } from '@taylorvance/tv-shared-runtime/storage';

const storage = createProjectStorage('wordlink', { version: 1 });

const themePreference = storage.readString('theme-preference') ?? 'system';

storage.writeString('dark', 'theme-preference');
storage.writeJson({ expanded: true }, 'panels', 'complexity');
const entries = storage.list();

When version is provided, keys follow the pattern <projectKey>:v<version>:<key parts...>, for example wordlink:v1:theme-preference.

The helper is SSR-safe and treats storage-access failures as soft failures by returning null or doing nothing.

It also provides namespace-level maintenance helpers:

• list() returns the current keys and raw string values for the active project/version namespace.
• clear() removes only the current project/version namespace.

Storage dev tools

For dev-only inspection, manual edits, and namespace JSON import/export, use the explicit storage-dev entry:

import { ProjectStorageInspector } from '@taylorvance/tv-shared-runtime/storage-dev';

export function StorageDebugPanel() {
  return (
    <ProjectStorageInspector
      projectKey="mcts-web"
      versions={[
        { label: 'Version 1', value: 1 },
        { label: 'Version 2', value: 2 },
      ]}
    />
  );
}

This inspector is meant for local tooling and debug screens, not default production UI.