skillet-shared 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Colin Diesh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,14 @@
-# Temporary Holding Version
+# skillet-shared
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Code that bender and videoskillet both ship, as raw TypeScript and CSS.
+
+- **In:** nothing at build time; each app compiles the source itself
+- **Out:** modules under `skillet-shared/<name>`, listed in `exports`
+
+Both apps run it through Vite, so imports keep their `.ts` form and need no build step.
+
+## Develop
+
+- `pnpm test` and `pnpm typecheck` run the package's own suite
+- In an app, `pnpm link ../skillet-shared` tests an edit before it is tagged
+- Release: bump `version`, tag it, `npm publish`, then bump the range in each app

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "skillet-shared",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Code shared by bender and videoskillet",
+  "license": "MIT",
+  "author": "Colin Diesh",
+  "repository": "github:cmdcolin/skillet-shared",
+  "type": "module",
+  "exports": {
+    "./history": "./src/history.ts",
+    "./relative-time": "./src/relative-time.ts",
+    "./posts": "./src/posts.ts",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": ["src", "!src/**/*.test.ts"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc"
+  },
+  "peerDependencies": {
+    "astro": "^7.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "astro": "^7.4.2",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.5"
+  }
+}

package/src/history.ts

@@ -0,0 +1,68 @@
+// A bounded undo/redo walk over whole-board snapshots.
+//
+// One step back would be enough if every destructive move were deliberate. It
+// stops being enough the moment finding a sound becomes a search: mutate,
+// mutate, random, mutate, and the board worth keeping is three steps behind the
+// one you can hear, with no way back to it. So the walk is retraceable in both
+// directions — which is also what makes a wild jitter safe to try, since the
+// cost of a bad roll is one keystroke rather than the board you had.
+//
+// Pure and generic on purpose: the interesting behaviour is the dedupe, the cap
+// and when the redo tail dies, and all three are worth pinning down in a test.
+
+// Deep enough to cover a run of rolls, small enough that a snapshot per entry
+// stays free — a couple of hundred numbers each.
+export const HISTORY_MAX = 24
+
+export interface History<T> {
+  // Oldest first, so the most recent step back is the last element.
+  readonly past: readonly T[]
+  // Nearest first: the state undo just left, ready to be stepped back into.
+  readonly future: readonly T[]
+}
+
+export const EMPTY_HISTORY: History<never> = { past: [], future: [] }
+
+// Record the state being replaced. `same` decides what counts as no movement:
+// more than one path snapshots the same board on the way to a single change, and
+// a stack of identical entries turns undo into a key you press four times to
+// hear anything.
+export function record<T>(
+  h: History<T>,
+  prev: T,
+  same: (a: T, b: T) => boolean,
+): History<T> {
+  const top = h.past.at(-1)
+  if (top !== undefined && same(top, prev)) {
+    // Still a new branch: the redo tail belonged to a walk this write leaves.
+    return h.future.length === 0 ? h : { past: h.past, future: [] }
+  }
+  return { past: [...h.past, prev].slice(-HISTORY_MAX), future: [] }
+}
+
+// Step back. `current` is the live state, which becomes the head of the redo
+// tail — the caller owns it, so it is passed in rather than kept here and left
+// to drift.
+export function stepBack<T>(
+  h: History<T>,
+  current: T,
+): { history: History<T>; value: T } | null {
+  const value = h.past.at(-1)
+  if (value === undefined) return null
+  return {
+    history: { past: h.past.slice(0, -1), future: [current, ...h.future] },
+    value,
+  }
+}
+
+export function stepForward<T>(
+  h: History<T>,
+  current: T,
+): { history: History<T>; value: T } | null {
+  const [value, ...rest] = h.future
+  if (value === undefined) return null
+  return {
+    history: { past: [...h.past, current].slice(-HISTORY_MAX), future: rest },
+    value,
+  }
+}

package/src/posts.ts

@@ -0,0 +1,37 @@
+// The blog's posts are markdown files written by hand. `scripts/blogdraft.mjs`
+// drafts one from the commits since the last post.
+import { z } from 'astro/zod'
+
+export const postSchema = z.object({
+  title: z.string(),
+  date: z.coerce.date(),
+  summary: z.string(),
+  image: z.string(),
+  imageAlt: z.string(),
+  look: z.string().optional(),
+  draft: z.boolean().default(false),
+})
+
+export type PostData = z.infer<typeof postSchema>
+
+export const published = (post: { data: PostData }) => !post.data.draft
+
+export const isoDay = (date: Date) => date.toISOString().slice(0, 10)
+
+export function longDate(date: Date) {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    timeZone: 'UTC',
+  })
+}
+
+export function newestFirst<T extends { id: string; data: PostData }>(
+  posts: T[],
+) {
+  return posts.toSorted(
+    (a, b) =>
+      b.data.date.getTime() - a.data.date.getTime() || a.id.localeCompare(b.id),
+  )
+}

package/src/relative-time.ts

@@ -0,0 +1,27 @@
+// How long ago something happened, in the words the home page puts on a resume
+// card and under a saved voice. Coarse on purpose: the reader is picking which
+// of their own boards to open, so "3 days ago" is the whole answer and a date
+// is one more thing to read.
+const MINUTE = 60_000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+const MONTH = 30 * DAY
+const YEAR = 365 * DAY
+
+const count = (ms: number, unit: number, name: string): string => {
+  const n = Math.floor(ms / unit)
+  return `${n} ${name}${n === 1 ? '' : 's'} ago`
+}
+
+// A clock that ran backwards — a machine whose time was wrong when the save
+// landed, or two machines disagreeing — reads as "just now" rather than as a
+// negative count.
+export function sinceWords(at: number, now: number): string {
+  const ms = now - at
+  if (!Number.isFinite(ms) || ms < MINUTE) return 'just now'
+  if (ms < HOUR) return count(ms, MINUTE, 'minute')
+  if (ms < DAY) return count(ms, HOUR, 'hour')
+  if (ms < MONTH) return count(ms, DAY, 'day')
+  if (ms < YEAR) return count(ms, MONTH, 'month')
+  return count(ms, YEAR, 'year')
+}

package/src/tokens.css

@@ -0,0 +1,65 @@
+/* The design system videoskillet and bender share: neutrals, borders, type,
+   spacing and corners, for the static site and the app alike. Each product
+   adds its own accent, signal colours and reset in its own sheet, and nothing
+   here names one.
+
+   Four text tiers: primary reading text, secondary (headers, labels about
+   labels), tertiary (prose, meta), and faint (icon affordances, placeholders).
+   --fg3 clears 8:1 on --surface, so explanatory prose reads at a glance.
+   Anything dimmer than --fg4 is decoration only.
+
+   The type scale is in rem, which nests without compounding and honours a
+   reader who set their browser's default font size. The comments give the px
+   each size lands on at the 16px default. */
+:root {
+  /* Tells the browser the UI is dark, so scrollbars, dropped lists, clear
+     buttons and focus rings come out dark too. */
+  color-scheme: dark;
+  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
+
+  /* The page, a card or panel on it, and a filled control on that. */
+  --bg: #0e0e11;
+  --surface: #16161a;
+  --surface-raised: #26262e;
+
+  --fg: #e6e6ee;
+  --fg2: #c6c6d6;
+  --fg3: #a6a6ba;
+  --fg4: #85859a;
+
+  /* --border is a surface's own edge. --border-quiet outlines chrome that sits
+     beside the controls it acts on. Both lift to --border-hover under the
+     pointer. --border-faint is a hairline that only has to exist. */
+  --border: #44444f;
+  --border-quiet: #33333f;
+  --border-hover: #63637a;
+  --border-faint: #2e2e38;
+
+  /* A failed write, or a button whose job is to remove something. */
+  --danger: #e08484;
+
+  --fs-xs: 0.6875rem; /* 11px */
+  --fs-sm: 0.75rem; /* 12px */
+  --fs: 0.8125rem; /* 13px */
+  --fs-md: 0.875rem; /* 14px */
+  --fs-lg: 1rem; /* 16px */
+  --fs-xl: 1.25rem; /* 20px */
+  /* Prose wraps to three to five lines in a narrow panel, where 1.2 is
+     unreadable. */
+  --prose-lh: 1.45;
+
+  /* The spacing scale, for gaps, padding and margins, in px because a panel's
+     density stays put when the reader scales their text. */
+  --space-2xs: 2px;
+  --space-xs: 4px;
+  --space-sm: 6px;
+  --space-md: 8px;
+  --space-lg: 12px;
+  --space-xl: 16px;
+  --space-2xl: 24px;
+
+  /* A control's corner, and a pill's at any height. */
+  --ctl-radius: 3px;
+  --pill-radius: 999px;
+}