@mnstry/atelier 0.2.0-alpha.13 → 0.2.0-alpha.14

package/src/ui/control-system.mjs

@@ -0,0 +1,201 @@
+const CONTROL_VARIANTS = new Set(['primary', 'secondary', 'quiet'])
+const CONTROL_SIZES = new Set(['default', 'compact'])
+const GROUP_LAYOUTS = new Set(['inline', 'grid'])
+
+function enumValue(value, allowed, fallback) {
+  return allowed.has(value) ? value : fallback
+}
+
+function htmlEscape(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function htmlAttr(name, value) {
+  if (value == null || value === false) return ''
+  if (value === true) return ` ${name}`
+  return ` ${name}="${htmlEscape(value)}"`
+}
+
+function htmlAttrs(attrs = {}) {
+  return Object.entries(attrs).map(([name, value]) => htmlAttr(name, value)).join('')
+}
+
+function controlAttrs(attrs = {}) {
+  return Object.fromEntries(Object.entries(attrs).filter(([name]) => (
+    /^(?:id|name|value|title|aria-[a-z0-9-]+|data-[a-z0-9-]+)$/.test(name)
+  )))
+}
+
+/**
+ * Tenant-neutral control geometry and interaction behavior shared by Atelier
+ * tooling and compatible publication surfaces. Consumers theme the primitive
+ * exclusively through the --system-control-* custom properties below.
+ * Generated markup carries no upstream project or package identity.
+ */
+export const atelierControlStyles = `
+.system-control {
+  display: inline-flex;
+  min-height: var(--system-control-height, 44px);
+  align-items: center;
+  justify-content: center;
+  gap: var(--system-control-gap, 0.5rem);
+  padding: 0 var(--system-control-pad-inline, 1.5rem);
+  border: 0;
+  border-radius: var(--system-control-radius, 0.875rem);
+  font: inherit;
+  font-size: var(--system-control-font-size, 1rem);
+  font-weight: var(--system-control-font-weight, 650);
+  line-height: 1.1;
+  letter-spacing: 0;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 0.2s var(--system-control-ease, ease),
+    color 0.2s var(--system-control-ease, ease),
+    box-shadow 0.2s var(--system-control-ease, ease),
+    transform 0.25s var(--system-control-ease, ease);
+}
+
+.system-control[data-variant="primary"] {
+  background: var(--system-control-primary-background, #c89d50);
+  color: var(--system-control-primary-foreground, #17110a);
+}
+
+.system-control[data-variant="secondary"] {
+  background: var(--system-control-secondary-background, transparent);
+  color: var(--system-control-secondary-foreground, #c89d50);
+  box-shadow: inset 0 0 0 1px var(--system-control-secondary-border, currentColor);
+}
+
+.system-control[data-variant="quiet"] {
+  background: var(--system-control-quiet-background, transparent);
+  color: var(--system-control-quiet-foreground, #c89d50);
+}
+
+.system-control[data-size="compact"] {
+  padding-inline: var(--system-control-compact-pad-inline, 1.125rem);
+  border-radius: var(--system-control-compact-radius, 0.6875rem);
+  font-size: var(--system-control-compact-font-size, 0.9375rem);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .system-control[data-variant="primary"]:hover {
+    background: var(--system-control-primary-hover-background, #b88d43);
+    color: var(--system-control-primary-hover-foreground, #17110a);
+    box-shadow: inset 0 0 0 1px var(--system-control-primary-hover-border, rgba(255, 255, 255, 0.25));
+  }
+
+  .system-control[data-variant="secondary"]:hover {
+    background: var(--system-control-secondary-hover-background, transparent);
+    color: var(--system-control-secondary-hover-foreground, #f4eee5);
+    box-shadow: inset 0 0 0 1px var(--system-control-secondary-hover-border, currentColor);
+  }
+
+  .system-control[data-variant="quiet"]:hover {
+    background: var(--system-control-quiet-hover-background, rgba(255, 255, 255, 0.02));
+    color: var(--system-control-quiet-hover-foreground, #f4eee5);
+  }
+}
+
+.system-control:active {
+  transform: translateY(1px);
+  transition-duration: 0.06s;
+}
+
+.system-control:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--system-control-focus, rgba(200, 157, 80, 0.3));
+}
+
+.system-control:disabled,
+.system-control[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.system-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--system-action-group-gap, 0.75rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.system-action-group[data-layout="grid"] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.system-action-group[data-layout="grid"] .system-control {
+  width: 100%;
+  justify-content: space-between;
+}
+
+@media (max-width: 40rem) {
+  .system-action-group[data-layout="grid"] {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .system-control,
+  .system-control:active {
+    transform: none;
+    transition: none;
+  }
+}
+`.trim()
+
+export function renderControl({
+  label,
+  href,
+  type = 'button',
+  variant = 'secondary',
+  size = 'default',
+  external = false,
+  arrow = false,
+  attrs = {},
+} = {}) {
+  const resolvedVariant = enumValue(variant, CONTROL_VARIANTS, 'secondary')
+  const resolvedSize = enumValue(size, CONTROL_SIZES, 'default')
+  const content = `${htmlEscape(label)}${arrow ? '<span aria-hidden="true">→</span>' : ''}`
+  const shared = {
+    class: 'system-control',
+    'data-variant': resolvedVariant,
+    'data-size': resolvedSize,
+    ...controlAttrs(attrs),
+  }
+
+  if (typeof href === 'string' && href.length > 0) {
+    return `<a${htmlAttr('href', href)}${htmlAttrs({
+      ...shared,
+      ...(external ? { target: '_blank', rel: 'noreferrer' } : {}),
+    })}>${content}</a>`
+  }
+
+  return `<button${htmlAttrs({ type, ...shared })}>${content}</button>`
+}
+
+export function renderActionGroup(actions = [], {
+  label = 'Actions',
+  layout = 'inline',
+  variant = 'secondary',
+  size = 'default',
+} = {}) {
+  const resolvedLayout = enumValue(layout, GROUP_LAYOUTS, 'inline')
+  const items = actions.map((action) => `<li>${renderControl({
+    ...action,
+    variant: action.variant ?? variant,
+    size: action.size ?? size,
+  })}</li>`).join('')
+
+  return `<nav aria-label="${htmlEscape(label)}"><ul class="system-action-group" data-layout="${resolvedLayout}">${items}</ul></nav>`
+}

package/src/ui/html-primitives.mjs

@@ -1,3 +1,5 @@
+import { atelierControlStyles } from './control-system.mjs'
+
 export function htmlEscape(value) {
   return String(value ?? '')
     .replaceAll('&', '&')
@@ -35,6 +37,7 @@ export function renderPageShell({ title = 'MNSTRY Atelier', body = '' } = {}) {
     '.meta{color:#666;font-size:13px}',
     'pre{white-space:pre-wrap;background:#1f2424;color:#f5f5ee;border-radius:8px;padding:16px;overflow:auto}',
     '.notice{border-left:4px solid #245f73;padding:12px 16px;background:#edf6f7}',
+    atelierControlStyles,
     '</style>',
     '</head>',
     '<body>',

package/src/upgrade/closure-diagnostics.mjs

@@ -0,0 +1,135 @@
+// Pure classifiers for the two consumer-install failures that PR #89 showed
+// with no typed diagnostic. Nothing here runs npm or touches the network:
+// consumer-smoke.mjs passes in npm's stderr and lockfiles and turns a finding
+// into an AtelierDiagnosticError.
+//
+// - consumer-closure-incomplete: an offline install asked for a package the
+//   warmed cache does not hold (npm's ENOTCACHED).
+// - override-not-inherited: a consumer's own lockfile holds a version, or a
+//   second copy, of a package the publisher pins with `overrides`. npm applies
+//   overrides only in the root project, so a consumer never receives them.
+
+export const CONSUMER_CLOSURE_INCOMPLETE = 'consumer-closure-incomplete'
+export const OVERRIDE_NOT_INHERITED = 'override-not-inherited'
+
+const ENOTCACHED = /^npm (?:error|ERR!) code ENOTCACHED$/m
+const REQUEST_URL = /^npm (?:error|ERR!) request to (\S+) failed/m
+const EXACT_VERSION = /^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/
+// An override key may select versions (`name@range`); only a bare name is an
+// unconditional pin.
+const SELECTOR_KEY = /^(?:@[^/@]+\/)?[^/@]+@/
+// npm colours its output on a terminal and Windows hosts end lines with CRLF.
+const ANSI = /\u001b\[[0-9;]*m/g
+
+// The package and version npm asked for, from a registry URL. A tarball URL
+// (`<registry>/<name>/-/<basename>-<version>.tgz`) names both; a packument URL
+// (`<registry>/<name>`) names only the package.
+function requestedPackage(url) {
+  let pathname
+  try { pathname = decodeURIComponent(new URL(url).pathname) } catch { return { package: null, version: null } }
+  const tarball = pathname.match(/^\/((?:@[^/]+\/)?[^/]+)\/-\/([^/]+)\.tgz$/)
+  if (tarball) {
+    const [, name, file] = tarball
+    const prefix = `${name.split('/').pop()}-`
+    return { package: name, version: file.startsWith(prefix) ? file.slice(prefix.length) : null }
+  }
+  const packument = pathname.match(/^\/((?:@[^/]+\/)?[^/]+)\/?$/)
+  return { package: packument ? packument[1] : null, version: null }
+}
+
+// A finding for npm stderr that reports ENOTCACHED, else null. Any other npm
+// failure is not classified here and keeps its own error.
+export function classifyNpmFailure(stderr) {
+  const text = String(stderr ?? '').replace(ANSI, '').replace(/\r\n?/g, '\n')
+  if (!ENOTCACHED.test(text)) return null
+  const url = text.match(REQUEST_URL)?.[1] ?? null
+  return { code: CONSUMER_CLOSURE_INCOMPLETE, ...(url ? requestedPackage(url) : { package: null, version: null }), url }
+}
+
+const isEntry = (entry) => entry !== null && typeof entry === 'object' && !Array.isArray(entry)
+const underNodeModules = (path) => /(?:^|\/)node_modules\//.test(path)
+
+// Every installed copy of `name` in a v2/v3 lockfile, one per node_modules
+// path, sorted by path. A copy's name is the entry's own `name` (set for an
+// npm: alias) or else the path after its last node_modules/. The root entry
+// ('') is the consumer itself, and links are not copies. A path outside
+// node_modules is a folder of the project (the target of a link): it is never
+// a copy, and no name is derived from it. An entry that is not an object is
+// not a copy either.
+function installedCopies(lockfile, name) {
+  return Object.entries(lockfile?.packages ?? {})
+    .filter(([path, entry]) => path !== '' && isEntry(entry) && !entry.link && underNodeModules(path)
+      && (entry.name ?? path.slice(path.lastIndexOf('node_modules/') + 'node_modules/'.length)) === name)
+    .map(([path, entry]) => ({ path, version: entry.version ?? null }))
+    .sort((left, right) => left.path.localeCompare(right.path))
+}
+
+// One finding per publisher override the consumer's lockfile does not honour:
+// a copy at another version, or more than one copy. An override whose package
+// the consumer does not install has nothing to honour; `compared` names the
+// overrides that had at least one copy to check. Only unconditional
+// exact-version overrides can be compared, so a version-selector key or a
+// non-exact value is refused rather than skipped.
+export function overrideFindings({ publisherOverrides, consumerLock }) {
+  if (!consumerLock || typeof consumerLock.packages !== 'object' || consumerLock.packages === null) {
+    throw new TypeError('consumer lockfile must be lockfileVersion 2 or 3 with a packages map')
+  }
+  const findings = []
+  const compared = []
+  for (const [name, pinned] of Object.entries(publisherOverrides ?? {})) {
+    if (SELECTOR_KEY.test(name)) {
+      throw new TypeError(`override key ${name} selects versions; the captured-closure check compares unconditional pins only`)
+    }
+    if (typeof pinned !== 'string' || !EXACT_VERSION.test(pinned)) {
+      throw new TypeError(`override for ${name} is not an exact version; the captured-closure check compares exact pins only`)
+    }
+    const found = installedCopies(consumerLock, name)
+    if (found.length > 0) compared.push(name)
+    if (found.length > 1 || found.some((copy) => copy.version !== pinned)) {
+      findings.push({ code: OVERRIDE_NOT_INHERITED, package: name, pinned, found })
+    }
+  }
+  return { findings, compared }
+}
+
+// The registry tarballs an offline `npm ci` needs from the consumer's own
+// lockfile: every entry with an http(s) `resolved` URL and an `integrity`.
+// Local entries (the candidate's `file:` tarball, links) and bundled entries
+// are not cached.
+// `missing` lists registry-installed paths that lack either field, which an
+// offline reinstall could not satisfy. An entry that is not an object is
+// listed as missing too: it names nothing that could be reinstalled.
+export function capturedClosure(consumerLock) {
+  const tarballs = []
+  const missing = []
+  for (const [path, entry] of Object.entries(consumerLock?.packages ?? {})) {
+    if (path === '') continue
+    if (!isEntry(entry)) {
+      missing.push(path)
+      continue
+    }
+    if (entry.link || entry.inBundle) continue
+    const resolved = typeof entry.resolved === 'string' ? entry.resolved : null
+    if (resolved && !/^https?:\/\//.test(resolved)) continue
+    if (resolved && typeof entry.integrity === 'string') tarballs.push({ path, resolved, integrity: entry.integrity })
+    else missing.push(path)
+  }
+  const byPath = (left, right) => (typeof left === 'string' ? left.localeCompare(right) : left.path.localeCompare(right.path))
+  return { tarballs: tarballs.sort(byPath), missing: missing.sort(byPath) }
+}
+
+// The installed tree from `npm ls --all --json`, one sorted line per package
+// with its ancestry, so two installs of the same project can be compared and
+// the first difference named.
+export function npmTreeLines(npmLsJson) {
+  const lines = []
+  const visit = (dependencies, ancestry) => {
+    for (const [name, entry] of Object.entries(dependencies ?? {})) {
+      const line = `${ancestry}${name}@${entry?.version ?? 'missing'}`
+      lines.push(line)
+      visit(entry?.dependencies, `${line} > `)
+    }
+  }
+  visit(npmLsJson?.dependencies, '')
+  return lines.sort()
+}