Added Sidenote Component

src/keystatic/components/general/sidenote.ts

@@ -0,0 +1,59 @@
+import { panelRightDashedIcon } from '@keystar/ui/icon/icons/panelRightDashedIcon';
+import { fields } from '@keystatic/core';
+import { inline } from '@keystatic/core/content-components';
+
+export const sidenoteComponents = {
+  Sidenote: inline({
+    label: 'Sidenote',
+    icon: panelRightDashedIcon,
+    schema: {
+      id: fields.text({
+        label: 'ID',
+        description: 'Unique Identifier (Auto-generated)',
+      }),
+      marker: fields.text({
+        label: 'Marker',
+        description: 'Number or Glyph for reference',
+        defaultValue: '⋄',
+        validation: {
+          length: {
+            min: 1,
+            max: 3,
+          },
+        },
+      }),
+      content: fields.text({
+        label: 'Note Content',
+        multiline: true,
+        validation: {
+          length: {
+            min: 1,
+          },
+        },
+      }),
+      type: fields.select({
+        label: 'Type',
+        description: 'Visual Style',
+        options: [
+          {
+            label: 'Default',
+            value: 'default',
+          },
+          {
+            label: 'Lore',
+            value: 'lore',
+          },
+          {
+            label: 'Crunch',
+            value: 'crunch',
+          },
+          {
+            label: 'Example',
+            value: 'example',
+          },
+        ],
+        defaultValue: 'default',
+      }),
+    },
+  }),
+};