@lapismd/mira 0.0.1

package/dist/preview/styles/frontmatter-properties.css

@@ -0,0 +1,532 @@
+.mira-frontmatter.metadata-container {
+  --metadata-property-label-start: 2rem;
+
+  container-type: inline-size;
+  font-family: var(--font-interface);
+  font-size: 0.875rem;
+  padding: 0;
+}
+
+.metadata-properties[data-empty="true"] {
+  color: var(--text-muted);
+}
+
+.metadata-empty {
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+}
+
+.metadata-add-property {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s);
+  color: var(--text-normal);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: 600;
+  gap: 0.5rem;
+  margin-block-start: 0.5rem;
+  padding: 0.5rem 0.25rem;
+}
+
+.metadata-add-property:hover {
+  background: var(--background-modifier-hover);
+}
+
+.metadata-add-property svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+.metadata-property {
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-flow: row wrap;
+  overflow: hidden;
+  position: relative;
+}
+
+.metadata-property:has(.mira-property-name-input[data-open="true"]) {
+  overflow: visible;
+  z-index: 5;
+}
+
+.metadata-property:focus-within {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-s);
+  box-shadow: 0 0 0 2px var(--border);
+}
+
+.metadata-property-key {
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  min-width: 9em;
+  width: 9em;
+}
+
+.metadata-property-key:focus-within,
+.metadata-property-value:focus-within {
+  background: var(--secondary);
+}
+
+.metadata-property-icon,
+.metadata-property-collapse-indicator {
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.metadata-property-icon {
+  gap: 0.125rem;
+  padding-block: 0.25rem;
+  padding-inline-start: 0.25rem;
+}
+
+.metadata-property-collapse-indicator,
+.metadata-property-type-button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  height: 1.25rem;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  width: 1.25rem;
+}
+
+.metadata-property-collapse-indicator:hover,
+.metadata-property-type-button:hover {
+  background: var(--background-modifier-hover);
+}
+
+.metadata-property[data-state="open"]
+  > .metadata-property-key
+  .metadata-property-collapse-indicator__icon {
+  transform: rotate(90deg);
+}
+
+.metadata-property-collapse-indicator__icon {
+  color: var(--text-accent);
+  transition: transform 120ms ease;
+}
+
+.metadata-property-icon svg,
+.metadata-property-collapse-indicator svg,
+.metadata-property-type-button svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.metadata-property-key-input {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0.25rem 0.5rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.metadata-property-key-input[readonly] {
+  cursor: default;
+}
+
+.metadata-property-key-input:focus {
+  outline: none;
+}
+
+.mira-property-name-input {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  position: relative;
+}
+
+.mira-property-name-suggestions {
+  background: var(--popover, var(--background-primary));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-m);
+  box-shadow:
+    0 8px 28px rgb(0 0 0 / 14%),
+    0 2px 8px rgb(0 0 0 / 8%);
+  color: var(--text-normal);
+  display: grid;
+  gap: 0.125rem;
+  inset-inline: 0;
+  min-width: 12rem;
+  padding: 0.25rem;
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  z-index: 30;
+}
+
+.mira-property-name-suggestion {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 0.5rem;
+  min-height: 1.875rem;
+  padding: 0.375rem 0.5rem;
+  text-align: start;
+}
+
+.mira-property-name-suggestion:hover,
+.mira-property-name-suggestion[data-active="true"] {
+  background: var(--background-modifier-hover);
+}
+
+.mira-property-name-suggestion__icon {
+  flex: 0 0 auto;
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.mira-property-value-input {
+  display: flex;
+  flex: 1 1 8ch;
+  min-width: 8ch;
+}
+
+[data-slot="popover-content"].mira-property-value-suggestions {
+  background: var(--popover, var(--background-primary));
+  border: 1px solid var(--border);
+  border-radius: var(--radius-m);
+  box-shadow:
+    0 8px 28px rgb(0 0 0 / 14%),
+    0 2px 8px rgb(0 0 0 / 8%);
+  color: var(--text-normal);
+  display: grid;
+  gap: 0.125rem;
+  max-height: min(18rem, var(--bits-popover-content-available-height, 18rem));
+  max-width: min(20rem, var(--bits-popover-content-available-width, 20rem));
+  min-width: min(12rem, var(--bits-popover-content-available-width, 12rem));
+  overflow-y: auto;
+  padding: 0.25rem;
+  width: var(--bits-popover-anchor-width, 12rem);
+}
+
+.mira-property-value-suggestion {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  min-height: 1.875rem;
+  padding: 0.375rem 0.5rem;
+  text-align: start;
+}
+
+.mira-property-value-suggestion:hover,
+.mira-property-value-suggestion[data-active="true"] {
+  background: var(--background-modifier-hover);
+}
+
+.metadata-property-menu,
+.metadata-property-type-menu {
+  max-height: var(
+    --bits-dropdown-menu-content-available-height,
+    min(70vh, 28rem)
+  );
+}
+
+.metadata-property-menu {
+  min-width: 10rem;
+}
+
+.metadata-property-type-menu {
+  min-width: 12rem;
+  overflow-y: auto;
+}
+
+.metadata-property-menu__icon-placeholder {
+  flex: 0 0 1rem;
+  height: 1rem;
+  width: 1rem;
+}
+
+.metadata-property-value {
+  --metadata-value-content-offset: 0;
+
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  gap: 0.25rem;
+  min-height: 29px;
+  min-width: 0;
+  padding-inline-start: 0;
+}
+
+.metadata-property-value-item {
+  box-sizing: border-box;
+}
+
+.metadata-property-value-item.metadata-input,
+.metadata-property-value-date {
+  align-items: center;
+  display: flex;
+  min-height: 29px;
+}
+
+.metadata-property-value
+  > :is(
+    .metadata-input-longtext,
+    .metadata-input-number,
+    .metadata-input-text,
+    .metadata-property-value-list
+  ) {
+  padding-inline-start: var(--metadata-value-content-offset);
+}
+
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  .metadata-property-value
+  > :is(
+    .metadata-input-longtext,
+    .metadata-input-number,
+    .metadata-input-text,
+    .metadata-property-value-list
+  ) {
+  padding-inline-start: var(--metadata-value-content-offset);
+}
+
+.metadata-property-value-item[contenteditable="true"]:empty::before {
+  color: var(--text-faint);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.metadata-input-number {
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="date"],
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="datetime-local"] {
+  font-variant-numeric: tabular-nums;
+  padding-inline-start: var(--size-4-6);
+  position: relative;
+}
+
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="date"]::-webkit-datetime-edit-text,
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="datetime-local"]::-webkit-datetime-edit-text {
+  color: var(--text-faint);
+  padding-inline-end: 0;
+}
+
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="date"]::-webkit-calendar-picker-indicator,
+:is(.markdown-preview-surface, .markdown-editor-surface, .markdown-widget-shell)
+  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  left: var(--size-4-1);
+  opacity: 0.5;
+  position: absolute;
+  right: auto;
+}
+
+@container (min-width: 250px) {
+  .metadata-property {
+    flex-wrap: nowrap;
+  }
+
+  .metadata-property-value {
+    padding-inline-start: 0;
+  }
+}
+
+@container (max-width: 249.99px) {
+  .metadata-property-key,
+  .metadata-property-value {
+    flex-basis: 100%;
+    width: 100%;
+  }
+
+  .metadata-property-key {
+    min-width: 100%;
+  }
+
+  .metadata-property-value {
+    padding-inline-start: var(--metadata-property-label-start);
+  }
+}
+
+.metadata-property-children {
+  flex-basis: 100%;
+  padding-inline-start: 1.5rem;
+  width: 100%;
+}
+
+.metadata-input {
+  background: transparent;
+  border: 0;
+  color: var(--text-normal);
+  font: inherit;
+  min-width: 0;
+}
+
+.metadata-input:focus {
+  outline: none;
+}
+
+.metadata-input-list {
+  flex: 1 1 0;
+  font-size: 0.75rem;
+  min-width: 8ch;
+  padding: 0.125rem 0.25rem;
+}
+
+.metadata-property-value-list {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  min-width: 0;
+  padding-block: 0.25rem;
+}
+
+.metadata-property-value-custom {
+  min-height: 1.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.metadata-property-pill-chip {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 0.25rem;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding-inline: 0.35rem 0.2rem;
+  white-space: normal;
+}
+
+.metadata-property-pill-chip:not(.tag) {
+  background: var(--markdown-alias-background, var(--secondary));
+  border-radius: var(--radius-s);
+  color: var(--secondary-foreground, var(--text-normal));
+  transition: background-color 120ms ease;
+}
+
+.metadata-property-pill-chip:not(.tag):hover {
+  background: var(
+    --markdown-alias-background-hover,
+    var(--background-modifier-hover)
+  );
+}
+
+.metadata-property-pill-label,
+.metadata-property-pill-link {
+  color: inherit;
+  display: inline-block;
+  font-weight: 400;
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  text-overflow: clip;
+  white-space: normal;
+  width: max-content;
+}
+
+.metadata-property-pill-link .mira-link-preview__trigger {
+  display: inline-block;
+  max-width: 100%;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+  width: max-content;
+}
+
+.metadata-property-value-list .metadata-property-pill-chip.tag {
+  border-radius: var(--radius-s);
+  line-height: 1.2;
+}
+
+.metadata-property-pill-chip button,
+.metadata-property-pill-chip__remove {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  height: 1rem;
+  justify-content: center;
+  opacity: 0.72;
+  padding: 0;
+  width: 1rem;
+}
+
+.metadata-property-pill-remove .mira-icon,
+.metadata-property-pill-chip__remove .mira-icon {
+  display: block;
+  flex: 0 0 0.625rem;
+  height: 0.625rem;
+  stroke: currentColor;
+  width: 0.625rem;
+}
+
+.metadata-property-pill-chip button:hover,
+.metadata-property-pill-chip__remove:hover {
+  background: color-mix(in oklab, currentColor 14%, transparent);
+  opacity: 1;
+}
+
+.metadata-property-pill-chip button:focus-visible,
+.metadata-property-pill-chip__remove:focus-visible {
+  box-shadow: 0 0 0 2px var(--ring, var(--text-accent));
+  outline: none;
+}
+
+.mira-frontmatter__raw {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.mira-frontmatter__error {
+  color: var(--callout-error);
+  margin: 0;
+}
+
+.mira-frontmatter__textarea {
+  background: var(--code-background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-s);
+  color: var(--code-normal);
+  font-family: var(--font-monospace);
+  min-height: 7rem;
+  padding: 0.5rem;
+  width: 100%;
+}

package/dist/preview/styles/frontmatter-properties.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=frontmatter-properties.test.d.ts.map

package/dist/preview/styles/frontmatter-properties.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-properties.test.d.ts","sourceRoot":"","sources":["../../../src/preview/styles/frontmatter-properties.test.ts"],"names":[],"mappings":""}

package/dist/preview/styles/frontmatter-properties.test.js

@@ -0,0 +1,57 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { cwd } from "node:process";
+import { describe, expect, it } from "vitest";
+const css = readFileSync(resolve(cwd(), "src/preview/styles/frontmatter-properties.css"), "utf8");
+const component = readFileSync(resolve(cwd(), "src/preview/components/frontmatter.svelte"), "utf8");
+const listValueComponent = readFileSync(resolve(cwd(), "src/preview/components/frontmatter-property-value-input.svelte"), "utf8");
+const textValueComponent = readFileSync(resolve(cwd(), "src/preview/components/frontmatter-property-text-input.svelte"), "utf8");
+describe("frontmatter property styles", () => {
+    it("uses the legacy dropdown and nested type-menu structure", () => {
+        expect(component).toContain('import * as DropdownMenu from "../../ui/dropdown-menu/index.js";');
+        expect(component).toContain('<DropdownMenu.Content\n      class="metadata-property-menu"');
+        expect(component).toContain("<DropdownMenu.SubTrigger>");
+        expect(component).toContain("<span>Property type</span>");
+        expect(component).toContain('<DropdownMenu.SubContent\n            class="metadata-property-type-menu"');
+        expect(component).toContain("<DropdownMenu.CheckboxItem");
+        expect(component).toContain('class="metadata-property-type-menu__type-icon size-4"');
+        expect(component).not.toContain("metadata-property-type-menu__item");
+        expect(component).not.toMatch(/class="metadata-property[^"\n]*\boverflow-hidden\b/u);
+        expect(css).toMatch(/\.metadata-property-menu,\s*\.metadata-property-type-menu\s*\{[^}]*--bits-dropdown-menu-content-available-height/su);
+    });
+    it("ships pill paint and remove-icon geometry without consumer utilities", () => {
+        expect(component).toContain("data-property-pill-kind={toBuiltinFrontmatterKind(property.kind)}");
+        expect(component).toContain('<Icon name="x" />');
+        expect(component).not.toContain("[&_svg]:size-2.5");
+        expect(css).toMatch(/\.metadata-property-pill-chip:not\(\.tag\)\s*\{[^}]*--markdown-alias-background[^}]*--secondary/su);
+        expect(css).toMatch(/\.metadata-property-pill-remove \.mira-icon,[^{]+\{[^}]*height: 0\.625rem[^}]*width: 0\.625rem/su);
+        expect(component).toContain('class="metadata-property-pill-label"');
+        expect(css).toMatch(/\.metadata-property-value-list\s*\{[^}]*flex-wrap:\s*wrap[^}]*min-width:\s*0/su);
+        expect(css).toMatch(/\.metadata-property-pill-chip\s*\{[^}]*overflow-wrap:\s*anywhere[^}]*white-space:\s*normal/su);
+        expect(css).toMatch(/\.metadata-property-pill-chip\s*\{[^}]*flex:\s*0 0 auto/su);
+        expect(css).toMatch(/\.metadata-property-pill-label,[^{]+\{[^}]*text-overflow:\s*clip[^}]*white-space:\s*normal[^}]*width:\s*max-content/su);
+        expect(css).toMatch(/\.metadata-property-pill-link \.mira-link-preview__trigger\s*\{[^}]*display:\s*inline-block[^}]*white-space:\s*normal[^}]*width:\s*max-content/su);
+        expect(css).toMatch(/\.metadata-property-value-list \.metadata-property-pill-chip\.tag\s*\{[^}]*border-radius:\s*var\(--radius-s\)/su);
+    });
+    it("portals list and text value suggestions through Mira Popover", () => {
+        for (const source of [listValueComponent, textValueComponent]) {
+            expect(source).toContain('import * as Popover from "../../ui/popover/index.js";');
+            expect(source).toContain("<Popover.Root bind:open>");
+            expect(source).toContain('class="mira-property-value-suggestions"');
+            expect(source).toContain('role="listbox"');
+        }
+        expect(component).toContain("<FrontmatterPropertyTextInput");
+        expect(component).toContain("const fallbackManager = $derived(");
+        expect(component).toContain("(controllerProp ? controllerProp.propertyManager : fallbackManager)");
+        expect(css).toContain('[data-slot="popover-content"].mira-property-value-suggestions');
+        expect(css).not.toContain('.metadata-property:has(.mira-property-value-input[data-open="true"])');
+        expect(listValueComponent).toContain('let draft = $state("");');
+        expect(listValueComponent).not.toContain("onInput:");
+        expect(listValueComponent).toContain('type="text"');
+        expect(listValueComponent).toContain("...textControlProps(props)");
+        for (const source of [listValueComponent, textValueComponent]) {
+            expect(source).toContain("let activeIndex = $state(-1);");
+            expect(source).toContain("activeIndex >= 0");
+        }
+    });
+});