@leavepulse/ui 0.12.0

package/src/components/LpInfraNode.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+/**
+ * Custom Vue Flow node for LpTopologyCanvas: an infra host/service card on kit
+ * tokens. Not used directly by consumers — LpTopologyCanvas registers it as the
+ * `infra` node type. Exported so apps can override the renderer if needed.
+ *
+ * Styled with Tailwind utilities (no scoped <style>) so the consumer's
+ * `@source` over the kit emits these classes — scoped CSS in a published
+ * component doesn't reach apps that only import the kit's token css.
+ */
+import { Handle, Position } from "@vue-flow/core"
+import { computed } from "vue"
+
+export interface InfraNodeData {
+  name: string
+  role: string
+  overlay?: string
+  online?: boolean
+  kind?: string
+  project?: string
+  /** Control-plane firewall rule count on this host (badge when > 0). */
+  firewallCount?: number
+  /** Service count on this host (badge when defined — services toggle on). */
+  serviceCount?: number
+  /** Fade the node back (search miss / not part of the focused node's graph). */
+  dimmed?: boolean
+}
+
+const props = defineProps<{ data: InfraNodeData; selected?: boolean }>()
+
+const roleVar: Record<string, string> = {
+  hypervisor: "var(--color-accent)",
+  game: "var(--color-action)",
+  router: "var(--color-muted-strong)",
+  edge: "var(--color-brand)",
+}
+const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)")
+const roleIcon: Record<string, string> = {
+  hypervisor: "▣",
+  game: "◈",
+  router: "⇄",
+  edge: "☁",
+}
+const icon = computed(() => roleIcon[props.data.role] ?? "●")
+</script>
+
+<template>
+  <div
+    class="w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]"
+    :class="selected ? 'border-[var(--accent)]' : 'border-line'"
+    :style="{
+      '--accent': accent,
+      opacity: data.dimmed ? 0.3 : data.online === false ? 0.5 : 1,
+      ...(selected
+        ? { boxShadow: '0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)' }
+        : {}),
+    }"
+  >
+    <Handle
+      type="target"
+      :position="Position.Left"
+      class="!size-2 !border-2 !border-[var(--accent)] !bg-surface"
+    />
+    <Handle
+      type="source"
+      :position="Position.Right"
+      class="!size-2 !border-2 !border-[var(--accent)] !bg-surface"
+    />
+
+    <div class="h-[3px] bg-[var(--accent)]" />
+    <div class="px-[11px] pb-2.5 pt-[9px]">
+      <div class="flex items-center gap-[7px]">
+        <span class="text-[13px] text-[var(--accent)]">{{ icon }}</span>
+        <span class="flex-1 truncate text-[13px] font-semibold text-ink">{{ data.name }}</span>
+        <span
+          v-if="data.online !== undefined"
+          class="size-[7px] rounded-full"
+          :class="data.online ? 'bg-action shadow-[0_0_6px_var(--color-action)]' : 'bg-danger'"
+        />
+      </div>
+      <div class="mt-1.5 flex items-center justify-between">
+        <span class="text-[10px] font-semibold uppercase tracking-wide text-[var(--accent)]">
+          {{ data.role }}
+        </span>
+        <span v-if="data.overlay" class="font-mono text-[10px] text-muted">{{ data.overlay }}</span>
+      </div>
+      <div
+        v-if="data.firewallCount || data.serviceCount !== undefined"
+        class="mt-1.5 flex items-center gap-1.5"
+      >
+        <span
+          v-if="data.firewallCount"
+          class="inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger"
+          :title="`${data.firewallCount} firewall rule(s)`"
+        >
+          <span>⛨</span>{{ data.firewallCount }}
+        </span>
+        <span
+          v-if="data.serviceCount !== undefined"
+          class="inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted"
+          :title="`${data.serviceCount} service(s)`"
+        >
+          <span>◇</span>{{ data.serviceCount }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/LpInput.vue

@@ -0,0 +1,147 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants"
+import { computed, ref, useAttrs, useSlots } from "vue"
+import { useInputFilter } from "../composables/useInputFilter"
+import LpFormField from "./LpFormField.vue"
+import LpIcon from "./LpIcon.vue"
+
+// Single source of truth for the field shell — bare input and adorned input
+// (e.g. LpPasswordInput) both use it, so the look never drifts.
+const shell = tv({
+  base: [
+    "flex w-full items-center bg-surface-soft text-ink",
+    "rounded-control border border-line",
+    "transition-colors duration-[var(--duration-fast)]",
+    "focus-within:border-brand focus-within:ring-2 focus-within:ring-ring",
+    "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55",
+  ],
+  variants: {
+    size: {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm",
+    },
+    invalid: {
+      true: "border-danger focus-within:border-danger focus-within:ring-danger-soft",
+    },
+  },
+  defaultVariants: { size: "md" },
+})
+
+const padX = { sm: "px-2.5", md: "px-3", lg: "px-3.5" } as const
+
+type InputVariants = VariantProps<typeof shell>
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    size?: InputVariants["size"]
+    invalid?: boolean
+    placeholder?: string
+    type?: string
+    disabled?: boolean
+    // Optional label/hint/error wraps the field in LpFormField. `icon` renders
+    // a leading icon (ignored when the `leading` slot is provided).
+    label?: string
+    hint?: string
+    error?: string
+    icon?: string
+    /**
+     * RegExp/string the whole value must match to be valid. Validation only —
+     * never blocks typing; a non-matching non-empty value shows the invalid
+     * style + aria-invalid. A bare string is anchored, like HTML `pattern`.
+     */
+    pattern?: RegExp | string
+    /**
+     * One-char RegExp of allowed characters (e.g. /[0-9]/). Hard-blocks
+     * disallowed input/paste at the source — cursor- and IME-safe.
+     */
+    restrict?: RegExp
+  }>(),
+  { type: "text", size: "md" },
+)
+
+defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+const { isInvalid, onBeforeInput, onPaste } = useInputFilter({
+  pattern: () => props.pattern,
+  restrict: () => props.restrict,
+})
+
+// Pattern failure folds into the same invalid state as the explicit prop/error.
+const patternInvalid = computed(() => isInvalid(props.modelValue))
+
+const slots = useSlots()
+const attrs = useAttrs()
+const hasLeading = computed(() => !!slots.leading || !!props.icon)
+const hasTrailing = computed(() => !!slots.trailing)
+const hasField = computed(
+  () => !!props.label || !!props.hint || !!props.error,
+)
+const isInvalidState = computed(
+  () => props.invalid || !!props.error || patternInvalid.value,
+)
+const shellClass = computed(() =>
+  shell({ size: props.size, invalid: isInvalidState.value }),
+)
+
+// class/style belong to the wrapper (so `<LpInput class="...">` lays out the
+// whole field); every other attr (autocomplete, name, @keyup, inputmode…) goes
+// to the real <input>.
+const rootClass = computed(() => attrs.class)
+const rootStyle = computed(() => attrs.style)
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs
+  return rest
+})
+
+const inputEl = ref<HTMLInputElement | null>(null)
+defineExpose({
+  focus: (options?: FocusOptions) => inputEl.value?.focus(options),
+  blur: () => inputEl.value?.blur(),
+  select: () => inputEl.value?.select(),
+  input: inputEl,
+})
+</script>
+
+<template>
+  <component
+    :is="hasField ? LpFormField : 'div'"
+    :label="hasField ? label : undefined"
+    :hint="hasField ? hint : undefined"
+    :error="hasField ? error : undefined"
+    :class="hasField ? rootClass : undefined"
+    :style="hasField ? rootStyle : undefined"
+  >
+    <div
+      :class="[shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : rootClass]"
+      :style="hasField ? undefined : rootStyle"
+    >
+      <span v-if="hasLeading" class="flex shrink-0 items-center text-muted">
+        <slot name="leading"><LpIcon v-if="icon" :name="icon" :size="16" /></slot>
+      </span>
+      <input
+        ref="inputEl"
+        v-bind="inputAttrs"
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :aria-invalid="isInvalidState || undefined"
+        :class="[
+          'min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted',
+          hasLeading ? 'pl-2' : padX[size ?? 'md'],
+          hasTrailing ? '' : padX[size ?? 'md'],
+        ]"
+        @beforeinput="onBeforeInput"
+        @paste="onPaste"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      />
+      <slot name="trailing" />
+    </div>
+  </component>
+</template>

package/src/components/LpLaneNode.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/**
+ * Custom Vue Flow node for a project SWIMLANE on LpTopologyCanvas: a sized
+ * background zone that groups the nodes of one project (overlay network). It is
+ * a NODE (not an overlay) so Vue Flow transforms it with pan/zoom for free.
+ *
+ * Purely decorative: the lane never intercepts pointer events (pan/drag pass
+ * through to the canvas), is non-selectable / non-draggable (set on the node
+ * object by the canvas), and sits below real nodes via a low z-index. The label
+ * tab stays clickable-looking but is inert. Tailwind utilities only so styles
+ * reach consumer apps via @source.
+ */
+export interface LaneNodeData {
+  label: string
+  /** Optional accent colour token for the lane border + label. */
+  accent?: string
+  width: number
+  height: number
+}
+
+const props = defineProps<{ data: LaneNodeData }>()
+</script>
+
+<template>
+  <div
+    class="pointer-events-none rounded-card border border-dashed"
+    :style="{
+      width: `${props.data.width}px`,
+      height: `${props.data.height}px`,
+      borderColor: props.data.accent ?? 'var(--color-line)',
+      background:
+        'color-mix(in srgb, ' +
+        (props.data.accent ?? 'var(--color-line-strong)') +
+        ' 6%, transparent)',
+    }"
+  >
+    <div
+      class="inline-flex translate-y-[-50%] items-center gap-1.5 rounded-pill border bg-surface px-2.5 py-0.5 text-[11px] font-semibold tracking-wide"
+      :style="{
+        borderColor: props.data.accent ?? 'var(--color-line)',
+        color: props.data.accent ?? 'var(--color-muted-strong)',
+        marginLeft: '14px',
+      }"
+    >
+      {{ props.data.label }}
+    </div>
+  </div>
+</template>

package/src/components/LpLink.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<{
+    href?: string
+    external?: boolean
+    muted?: boolean
+    /**
+     * "default" — plain hover underline.
+     * "reveal"  — an underline bar that grows in from the left on hover
+     *   (origin-left scale-x 0→1). The LeavePulse landing "monitoring" link feel;
+     *   good for inline prose links and nav items that want a bit of motion.
+     */
+    variant?: "default" | "reveal"
+  }>(),
+  { variant: "default" },
+)
+
+const rel = computed(() => (props.external ? "noopener noreferrer" : undefined))
+const target = computed(() => (props.external ? "_blank" : undefined))
+
+const colorClass = computed(() =>
+  props.muted ? "text-muted hover:text-ink" : "text-brand hover:text-brand-hover",
+)
+
+// The reveal bar: an ::after pseudo-element pinned to the baseline, full-width
+// but scaled to 0 on the x-axis from the left, growing to 1 on hover/focus. The
+// bar colour follows the link colour (brand, or ink when muted) so it re-skins
+// with the theme.
+const revealClass =
+  "relative after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-[var(--duration-medium)] hover:after:scale-x-100 focus-visible:after:scale-x-100"
+</script>
+
+<template>
+  <a
+    :href="href"
+    :target="target"
+    :rel="rel"
+    class="inline-flex items-center gap-1 underline-offset-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+    :class="[
+      colorClass,
+      variant === 'reveal' ? revealClass : 'hover:underline',
+    ]"
+  >
+    <slot />
+  </a>
+</template>