🌳

-tmp/-wip/Image.Svg/Svg.ts

@@ -0,0 +1,14 @@
+import { SvgRef } from './SvgRef';
+import { SvgElement } from './libs';
+
+/**
+ * Helpers for working with SVG objects within the given container element.
+ *
+ * NOTE:
+ *    This helper assumes <svg> data assembled via the webpack plugin
+ *    (see [cell.compiler]).
+ */
+export const Svg = {
+  ref: SvgRef,
+  Element: SvgElement,
+};

-tmp/-wip/Image.Svg/SvgRef.ts

@@ -0,0 +1,35 @@
+import * as t from './types';
+import { SVG } from './libs';
+
+/**
+ * A helper for working with <SVG> objects within a given DOM container element.
+ *
+ * NOTE:
+ *    This helper assumes <svg> data assembled via the webpack plugin
+ *    (see [cell.compiler]).
+ */
+export function SvgRef(filename: string, elContainer: HTMLElement): t.SvgRef {
+  filename = (filename ?? '')
+    .trim()
+    .replace(/^\#/, '')
+    .replace(/\.svg$/, '');
+  filename = `${filename}.svg`;
+
+  return {
+    filename,
+    find(id: string) {
+      id = (id || '').trim().replace(/^\#/, '');
+      const query = `#${Format.toId(filename)}__${Format.toId(id)}`;
+      const el = elContainer.querySelector(query);
+      return el ? SVG(el) : undefined;
+    },
+  };
+}
+
+/**
+ * [Helpers]
+ */
+
+const Format = {
+  toId: (value: string) => value.replace(/\./g, '_'),
+};

-tmp/-wip/Image.Svg/dev/DEV.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { DevActions } from 'sys.ui.dev';
+
+import { Sample, SampleProps } from './Sample';
+
+type Ctx = { props: SampleProps };
+
+/**
+ * Actions
+ */
+export const actions = DevActions<Ctx>()
+  .namespace('ui.Image.Svg')
+  .context((e) => {
+    if (e.prev) return e.prev;
+    return {
+      props: { width: 600, color: 'dark' },
+    };
+  })
+
+  .items((e) => {
+    e.title('<Svg>');
+
+    e.button('width: 600', (e) => (e.ctx.props.width = 600));
+    e.button('width: 200', (e) => (e.ctx.props.width = 200));
+
+    e.hr(1, 0.1);
+
+    e.button('color: dark', (e) => (e.ctx.props.color = 'dark'));
+    e.button('color: blue', (e) => (e.ctx.props.color = 'blue'));
+
+    e.hr();
+  })
+
+  .subject((e) => {
+    e.settings({
+      host: { background: -0.04 },
+      layout: { cropmarks: -0.2 },
+    });
+
+    e.render(<Sample {...e.ctx.props} />);
+  });
+
+export default actions;

-tmp/-wip/Image.Svg/dev/Sample.tsx

@@ -0,0 +1,35 @@
+import '../types.declare';
+
+import React, { useEffect } from 'react';
+
+import { Svg } from '..';
+import { COLORS, css } from '../../../common';
+import Image from '../../../../static/images/sample/svg.sample.svg';
+
+export type SampleProps = { color: 'dark' | 'blue'; width: number };
+
+export const Sample: React.FC<SampleProps> = (props) => {
+  const { width } = props;
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const svg = Svg.ref('svg.sample', ref.current as HTMLElement);
+
+    const isDark = props.color === 'dark';
+    const color = isDark ? COLORS.DARK : COLORS.BLUE;
+
+    const tick = svg.find('tick');
+    const outline = svg.find('border-outline');
+
+    tick?.opacity(isDark ? 1 : 0.2);
+    outline?.stroke(color);
+  }, [props.color]);
+
+  const styles = { base: css({}) };
+
+  return (
+    <div ref={ref} {...css(styles.base)}>
+      <Image width={width} />
+    </div>
+  );
+};

-tmp/-wip/Image.Svg/index.ts

@@ -0,0 +1,3 @@
+export { Svg } from './Svg';
+export { SvgRef } from './SvgRef';
+export { SvgElement } from './libs';

-tmp/-wip/Image.Svg/libs.ts

@@ -0,0 +1 @@
+export { SVG, Element as SvgElement } from '@svgdotjs/svg.js';

-tmp/-wip/Image.Svg/types.declare.ts

@@ -0,0 +1,11 @@
+/**
+ * Importing <SVG> assets.
+ * See:
+ *    https://react-svgr.com
+ */
+declare module '*.svg' {
+  import React = require('react');
+  type Svg = React.SVGProps<SVGSVGElement> & { width?: number; height?: number };
+  export const ReactComponent: React.FC<Svg>;
+  export default ReactComponent;
+}

-tmp/-wip/Image.Svg/types.ts

@@ -0,0 +1,6 @@
+import { Element as SvgElement } from '@svgdotjs/svg.js';
+
+export type SvgRef = {
+  filename: string;
+  find(id: string): SvgElement | undefined;
+};

.github/workflows/jsr.yaml

@@ -25,10 +25,21 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: denoland/setup-deno@v1
+
+      - name: 'Install ESM Runtime: Deno 2.x'
+        uses: denoland/setup-deno@v1
         with:
           deno-version: v2
 
+      - name: 'Install ES Modules from JSR: https://jsr.io/@sys'
+        run: deno task info
+
+      - name: Deno Info
+        run: deno info && deno --version
+
+      - name: System Info
+        run: deno task info
+
       - name: publish module → "@sys/types"
         run: |
           cd code/sys/types

.github/workflows/jsr.yaml_

@@ -34,3 +34,15 @@ jobs:
           cd code/sys.driver/driver-vite
           deno task test --parallel --trace-leaks
           deno publish --allow-dirty
+
+      - name: publish module → "@sys/driver-vitepress"
+        run: |
+          cd code/sys.driver/driver-vitepress
+          deno task test --parallel --trace-leaks
+          deno publish --allow-dirty
+
+      - name: publish module → "@sys/tmp"
+        run: |
+          cd code/sys.tmp
+          deno task test --parallel --trace-leaks
+          deno publish --allow-dirty

README.md

@@ -29,7 +29,6 @@
 [jsr-ci-url]: https://github.com/sys-repo/sys/actions/workflows/jsr.yaml
 
 
-
 Monorepo comprising the core set of shared `/sys` "system" modules that flexibly compose into varying arrangements of (1) extremely-late-bound, (2) strongly typed, (3) decentralised, "cell like" functional processes.
 
 - modules: [sys](/code/sys/) ← standard libs

code/-tmpl/-test.ui.ts

@@ -0,0 +1,7 @@
+/**
+ * @module
+ * Testing tools running in the browser/ui.
+ */
+export { expect } from '@sys/std/testing';
+export { Dev, Spec } from '@sys/ui-react-devharness';
+export * from './common.ts';

code/-tmpl/common.t.ts

@@ -0,0 +1,10 @@
+/**
+ * 🐷
+ * NB: placeholder type exports to ensure template imports don't error.
+ */
+export type * from './deno/src/common/t.ts';
+export type * from './m.mod.ui/t.ts';
+export type * from './m.mod/t.ts';
+
+export type * from '@sys/types/t';
+export type { CssInput } from '@sys/ui-css/t';

code/-tmpl/common.ts

@@ -1,2 +1,13 @@
-// NB: placeholder to ensure template imports don't error.
+/**
+ * 🐷
+ * NB: placeholder exports to ensure template imports don't error.
+ */
+export type * as t from './common.t.ts';
 export * from './deno/src/common.ts';
+
+/**
+ * UI Refs:
+ */
+export { Color, css } from '@sys/ui-css';
+export { Signal } from '@sys/ui-react';
+export { Button } from '@sys/ui-react-components';

code/-tmpl/deno/deno.json

@@ -5,6 +5,7 @@
   "tasks": {
     "lint": "deno lint",
     "dry": "deno publish --allow-dirty --dry-run",
+    "check": "deno check src/*",
     "clean": "deno run -RWE ./-scripts/-clean.ts",
     "test": "deno test -RWNE --allow-run --allow-ffi",
     "dev": "deno run -RWNE --allow-run --allow-ffi ./-scripts/-dev.ts",

code/-tmpl/deno/src/common/libs.ts

@@ -1 +1 @@
-export { Err, Pkg, Time } from '@sys/std';
+export { Err, Pkg, rx, Signal, Time } from '@sys/std';

code/-tmpl/deno/src/pkg.ts

@@ -1,8 +1,16 @@
-import { Pkg, type t } from '@sys/std';
-import { default as deno } from '../deno.json' with { type: 'json' };
-
+import type { Pkg } from '@sys/types';
 
 /**
  * Package meta-data.
+ *
+ * AUTO-GENERATED:
+ *    This file is generated via the `prep` command across the
+ *    @system monorepo. See command:
+ *
+ *        cd ./<system-repo-root>
+ *        deno task prep
+ *
+ *    - DO check this file in to source-control.
+ *    - Do NOT manually alter the file (as your work will be lost).
  */
-export const pkg: t.Pkg = Pkg.fromJson(deno);
+export const pkg: Pkg = { name: '@sys/name', version: '0.0.0' };

code/-tmpl/m.mod.ui/-SPEC.Debug.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { type t, Button, Color, css, Signal } from './common.ts';
+
+type P = t.MyComponentProps;
+
+/**
+ * Types:
+ */
+export type DebugProps = { debug: DebugSignals; style?: t.CssInput };
+export type DebugSignals = ReturnType<typeof createDebugSignals>;
+
+/**
+ * Signals:
+ */
+export function createDebugSignals(init?: (e: DebugSignals) => void) {
+  const s = Signal.create;
+  const props = { theme: s<P['theme']>('Light') };
+  const api = {
+    props,
+    listen() {
+      const p = props;
+      p.theme.value;
+    },
+  };
+  init?.(api);
+  return api;
+}
+
+/**
+ * Component:
+ */
+export const Debug: React.FC<DebugProps> = (props) => {
+  const { debug } = props;
+  const p = debug.props;
+
+  Signal.useRedrawEffect(() => debug.listen());
+
+  /**
+   * Render:
+   */
+  const styles = {
+    base: css({}),
+    title: css({ fontWeight: 'bold', marginBottom: 10 }),
+    cols: css({ display: 'grid', gridTemplateColumns: 'auto 1fr auto' }),
+  };
+
+  return (
+    <div className={css(styles.base, props.style).class}>
+      <div className={css(styles.title, styles.cols).class}>
+        <div>{'Title'}</div>
+        <div />
+        <div></div>
+      </div>
+
+      <Button
+        block
+        label={() => `theme: "${p.theme}"`}
+        onClick={() => Signal.cycle<P['theme']>(p.theme, ['Light', 'Dark'])}
+      />
+
+      <hr />
+    </div>
+  );
+};