feat: Various layout/key render work, theme fixes

* Incremental fixes to key/physical layouts, including more compact
  size until hovering over a key, some HID usage display, etc.
* Fix up color usage for light/dark theme usage.

Author: petejohanson

src/HidUsageTables-1.5.json

@@ -12,6 +12,8 @@ import type { AvailableDevice } from './tauri/index';
 import { connect as tauri_ble_connect, list_devices as ble_list_devices } from './tauri/ble';
 import { connect as tauri_serial_connect, list_devices as serial_list_devices } from './tauri/serial';
 
+import { hid_usage_get_label, hid_usage_page_and_id_from_usage } from './hid-usages';
+import { LayerPicker } from './keyboard/LayerPicker';
 import { PhysicalLayout as PhysicalLayoutComp } from './keyboard/PhysicalLayout';
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
@@ -72,27 +74,41 @@ async function test(factory: TransportFactory, setPhysicalLayout: Dispatch<Physi
   console.log("Keymap", keymap);
 }
 
-function renderLayout(layout: PhysicalLayout, keymap: Keymap, behaviors: BehaviorMap) {
-  if (!keymap.layers[0]) {
+function renderLayout(layout: PhysicalLayout, keymap: Keymap, behaviors: BehaviorMap, selectedLayoutIndex: number) {
+  console.log("Render", keymap, selectedLayoutIndex);
+  if (!keymap.layers[selectedLayoutIndex]) {
     return (<></>);
   }
 
-  let positions = layout.keys.map((k, i) => ({ label: behaviors[keymap.layers[0].bindings[i].behaviorId]?.friendlyName || "Unknown", x: k.x / 100.0, y: k.y / 100.0, width: k.width / 100, height: k.height / 100.0}));
+  let positions = layout.keys.map((k, i) => {
+    let [page, id] = hid_usage_page_and_id_from_usage(keymap.layers[selectedLayoutIndex].bindings[i].param1);
+
+    // TODO: Do something with implicit mods!
+    page &= 0xFF;
+    
+    let label = hid_usage_get_label(page, id)?.replace(/^Keyboard /, '');
+
+    return { header: behaviors[keymap.layers[selectedLayoutIndex].bindings[i].behaviorId]?.friendlyName || "Unknown", x: k.x / 100.0, y: k.y / 100.0, width: k.width / 100, height: k.height / 100.0, children: (<span>{label}</span>)};
+  });
 
   return <PhysicalLayoutComp positions={positions} />;
 }
 
 export default function RpcTest() {
   const [layout, setLayout] = useState<PhysicalLayout | undefined>(undefined);
   const [keymap, setKeymap] = useState<Keymap | undefined>(undefined);
+  const [selectedLayerIndex, setSelectedLayerIndex] = useState<number>(0);
   const [behaviors, setBehaviors] = useState<BehaviorMap>({});
 
   let connections = TRANSPORTS.filter((t) => t !== undefined).map((t) => <button key={t.label} onClick={() => test(t, setLayout, setKeymap, setBehaviors)}>{t.label}</button>);
 
   return (
     <div>
       <div>{connections}</div>
-      {layout && keymap && behaviors && (<div>{renderLayout(layout, keymap, behaviors)}</div>)}
+      <div>
+        {keymap && (<LayerPicker layers={keymap.layers} selectedLayerIndex={selectedLayerIndex} onLayerClicked={setSelectedLayerIndex} />) }
+        {layout && keymap && behaviors && (<div>{renderLayout(layout, keymap, behaviors, selectedLayerIndex)}</div>)}
+      </div>
     </div>
   )
 }

src/RpcTest.tsx

@@ -0,0 +1,15 @@
+
+import { UsagePages } from './HidUsageTables-1.5.json';
+
+
+export interface UsageId {
+    Id: number;
+    Name: string;
+    Kinds?: string[];
+};
+
+export const hid_usage_page_and_id_from_usage = (usage: number): [number, number] => [((usage >> 16) & 0xFF), (usage & 0xFFFF)]
+
+export const hid_usage_get_label = (usage_page: number, usage_id: number): string | undefined => 
+    UsagePages.find((p) => p.Id === usage_page)?.UsageIds?.find((u) => u.Id === usage_id)?.Name;
+

src/hid-usages.ts

@@ -4,8 +4,8 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: light-dark(#242424, rgba(255, 255, 255, 0.87));
+  background-color: light-dark(rgba(255, 255, 255, 0.87), #242424);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/index.css

@@ -1,3 +1,4 @@
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Key } from './Key';
@@ -29,22 +30,25 @@ export const Primary: Story = {
     primary: true,
     width: 1,
     height: 1,
-    label: 'Key',
+    header: 'Key Press',
+    children: [<span>A</span>],
   },
 };
 
 export const Secondary: Story = {
   args: {
     width: 1,
     height: 1,
-    label: 'Key',
+    header: 'Key Press',
+    children: [<span>B</span>],
   },
 };
 
 export const Large: Story = {
   args: {
     width: 2,
     height: 1,
-    label: 'Key',
+    header: 'Key Press',
+    children: [<span>C</span>],
   },
 };

src/keyboard/Key.stories.ts src/keyboard/Key.stories.tsxsrc/keyboard/Key.stories.ts renamed to src/keyboard/Key.stories.tsx

@@ -1,5 +1,6 @@
 import './key.css';
 
+import { PropsWithChildren, Children } from 'react';
 import { scale } from './geometry';
 
 interface KeyProps {
@@ -15,7 +16,7 @@ interface KeyProps {
   /**
    * Button contents
    */
-  label: string;
+  header: string;
   /**
    * Optional click handler
    */
@@ -27,13 +28,13 @@ interface KeyDimension {
   height: number,
 };
 
-function makeSize({ width, height}: KeyDimension): KeyDimension {
+function makeSize({ width, height}: KeyDimension) {
   width = scale(width);
   height = scale(height);
 
   return {
-    width,
-    height
+    '--zmk-key-center-width': 'calc(' + width + 'px - 2px)',
+    '--zmk-key-center-height': 'calc(' + height + 'px - 2px)'
   };
 }
 
@@ -42,11 +43,13 @@ function makeSize({ width, height}: KeyDimension): KeyDimension {
  */
 export const Key = ({
   primary = false,
-  label,
+  header,
   ...props
-}: KeyProps) => {
+}: PropsWithChildren<KeyProps>) => {
   const mode = primary ? 'zmk-key__button--primary' : 'zmk-key__button--secondary';
   const size = makeSize(props);
+  const children = Children.map(props.children, (c) => <div className="zmk-key__button__child">{c}</div>);
+
   return (
     <div
     className='zmk-key'
@@ -56,7 +59,8 @@ export const Key = ({
         type="button"
         className={['zmk-key__button', mode].join(' ')}
       >
-        {label}
+        <span className="zmk-key__button__header">{header}</span>
+        {children}
       </button>
     </div>
   );

src/keyboard/Key.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { LayerPicker } from './LayerPicker';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Keyboard/LayerPicker',
+  component: LayerPicker,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: {  },
+} satisfies Meta<typeof LayerPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Named: Story = {
+  args: {
+    layers: [
+      { label: "Base"},
+      { label: "Num"},
+      { label: "Nav"},
+      { label: "Symbol"},
+    ],
+    selectedLayerIndex: 2,
+    onLayerClicked: (layer, index) => console.log("Layer clicked", layer),
+    onAddClicked: () => console.log("add item!"),
+  },
+};
+
+export const NoAdd: Story = {
+  args: {
+    layers: [
+      { label: "Base"},
+      { label: "Num"},
+      { label: "Nav"},
+      { label: "Symbol"},
+    ],
+    selectedLayerIndex: 2,
+  },
+};
+
+export const NoNames: Story = {
+  args: {
+    layers: [
+      { },
+      { },
+      { },
+    ],
+    selectedLayerIndex: 0,
+  },
+};
+

src/keyboard/LayerPicker.stories.ts

@@ -0,0 +1,46 @@
+import './layer-picker.css';
+
+interface Layer {
+  name?: string;
+}
+
+type LayerClickCallback = (index: number) => void;
+
+interface LayerPickerProps {
+  layers: Array<Layer>;
+  selectedLayerIndex: number;
+
+  onAddClicked?: () => void;
+
+  onLayerClicked?: LayerClickCallback;
+}
+
+function renderItem(layer: Layer, index: number, selected: boolean, onClick?: LayerClickCallback) {
+  let className = "zmk-layer-picker__item";
+  if (selected) {
+    className += " zmk-layer-picker__item--selected";
+  }
+  return <li className={className} onClick={() => onClick?.(index)}>{layer.name || index.toLocaleString() }</li>;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const LayerPicker = ({
+  layers,
+  selectedLayerIndex,
+  onAddClicked,
+  onLayerClicked,
+  ...props
+}: LayerPickerProps) => {
+  let layer_items = layers.map((layer, index) => renderItem(layer, index, index === selectedLayerIndex, onLayerClicked));
+
+  return (
+    <ul
+    className='zmk-layer-picker'
+    {...props}>
+      {layer_items}
+      {onAddClicked && <li className="zmk-layer-picker__add" onClick={onAddClicked}>+</li>}
+    </ul>
+  );
+};

src/keyboard/LayerPicker.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PhysicalLayout } from './PhysicalLayout';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Keyboard/PhysicalLayout',
+  component: PhysicalLayout,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+  },
+  args: {  },
+} satisfies Meta<typeof PhysicalLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TOP = ["Esc", ..."QWERTYUIOP"];
+const MIDDLE = [..."ASDFGHJKL;"];
+const LOWER = [..."ZXCVBNM<>", "Up", "Shift"];
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Minivan: Story = {
+  args: {
+    positions: [
+      ...TOP.map((k,i) => ({
+        width: 1,
+        height: 1,
+        x: i,
+        y: 0,
+        header: "Key Press",
+        children: [<span>{k}</span>]
+      }))
+      , { x: TOP.length, y: 0, width: 1.75, height: 1, header: "Key Press", children: [<span>Backspace</span>]}
+      , { x: 0, y: 1, width: 1.25, height: 1, header: "Key Press", children: [<span>Tab</span>]}
+      , ...MIDDLE.map((k,i) => ({ x: i+1.25, y: 1, width: 1, height: 1, header: "Key Press", children: [<span>{k}</span>]}))
+      , { x: MIDDLE.length + 1.25, y: 1, width: 1.5, height: 1, header: "Key Press", children: [<span>Enter</span>]}
+      , { x: 0, y: 2, width: 1.75, height: 1, header: "Key Press", children: [<span>Shift</span>]}
+      , ...LOWER.map((k,i) => ({ x: i+1.75, y: 2, width: 1, height: 1, header: "Key Press", children: [<span>{k}</span>]}))
+      , { x: 0, y: 3, width: 1.25, height: 1,    header: "Key Press", children: [<span>Control</span>]}
+      , { x: 1.25, y: 3, width: 1.5, height: 1,  header: "Key Press", children: [<span>Code</span>]}
+      , { x: 2.75, y: 3, width: 1.25, height: 1, header: "Key Press", children: [<span>Alt</span>]}
+      , { x: 4, y: 3, width: 2.25, height: 1,    header: "Key Press", children: [<span></span>]}
+      , { x: 6.25, y: 3, width: 2, height: 1,    header: "Key Press", children: [<span></span>]}
+      , { x: 8.25, y: 3, width: 1.5, height: 1,  header: "Key Press", children: [<span>Alt</span>]}
+      , { x: 9.75, y: 3, width: 1, height: 1,    header: "Key Press", children: [<span>Left</span>]}
+      , { x: 10.75, y: 3, width: 1, height: 1,   header: "Key Press", children: [<span>Down</span>]}
+      , { x: 11.75, y: 3, width: 1, height: 1,   header: "Key Press", children: [<span>Right</span>]}
+    ]
+  },
+};