@noya-app/noya-designsystem 0.1.94 → 0.1.96

package/src/utils/fuzzyScorer.ts

@@ -31,6 +31,77 @@ export function fuzzyFilter({
     .sort((a, b) => b.score - a.score);
 }
 
+/**
+ * Word-boundary filter for name-like lists (e.g. font families): ranks
+ * exact > prefix > word-start matches and only falls back to substring
+ * matches when nothing matches at a word boundary. Prevents queries like
+ * "Play" from surfacing every "* Display" family via mid-word substrings.
+ */
+export function wordPrefixFilter({
+  items,
+  query,
+}: {
+  items: string[];
+  query: string;
+}): IScoredItem[] {
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (!normalizedQuery) {
+    return items.map((_, index): IScoredItem => ({ index, score: 0 }));
+  }
+
+  const boundaryMatches: IScoredItem[] = [];
+  const substringMatches: IScoredItem[] = [];
+
+  items.forEach((text, index) => {
+    const lower = text.toLowerCase();
+
+    const makeItem = (score: number, start: number): IScoredItem => ({
+      index,
+      score,
+      labelMatch: [{ start, end: start + normalizedQuery.length }],
+    });
+
+    if (lower === normalizedQuery) {
+      boundaryMatches.push({
+        index,
+        score: 4000,
+        labelMatch: [{ start: 0, end: text.length }],
+      });
+      return;
+    }
+
+    if (lower.startsWith(normalizedQuery)) {
+      boundaryMatches.push(makeItem(3000, 0));
+      return;
+    }
+
+    // Match at the start of any subsequent word (space/hyphen separated)
+    const wordStart = lower.search(
+      new RegExp(`[\\s-]${escapeRegExp(normalizedQuery)}`)
+    );
+    if (wordStart !== -1) {
+      boundaryMatches.push(makeItem(2000 - wordStart, wordStart + 1));
+      return;
+    }
+
+    const substringIndex = lower.indexOf(normalizedQuery);
+    if (substringIndex !== -1) {
+      substringMatches.push(makeItem(1, substringIndex));
+    }
+  });
+
+  // Only fall back to mid-word substring matches when nothing matched at a
+  // word boundary.
+  const result = boundaryMatches.length > 0 ? boundaryMatches : substringMatches;
+
+  return result.sort((a, b) => b.score - a.score);
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 export type IToken =
   | { type: "text"; text: string }
   | { type: "match"; text: string };

package/tailwind.config.ts

@@ -5,6 +5,13 @@ import type { Config } from "tailwindcss";
 
 const config = {
   ...noyaConfig,
+  // Tailwind class names are confined to the packages that generate CSS: this
+  // package and @noya-app/inspector. The inspector package ships no Tailwind
+  // build of its own — its classes are generated here and reach apps through
+  // the dist/index.css that @noya-app/inspector re-exports/imports — so its
+  // sources are part of this build's content. Consuming packages/apps compose
+  // styled components instead of writing raw class names for them.
+  content: ["./src/**/*.{ts,tsx}", "../inspector/src/**/*.{ts,tsx}"],
   prefix: "n-",
   plugins: [containerQueries, typography],
   safelist: [

package/src/components/InspectorPrimitives.tsx

@@ -1,188 +0,0 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  LabelHTMLAttributes,
-  memo,
-  ReactNode,
-} from "react";
-import { cx } from "../utils/classNames";
-import { Spacer } from "./Spacer";
-import { textStyles } from "./Text";
-
-export const Section = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(`n-flex-none n-flex n-flex-col`, className)}
-    {...props}
-  />
-));
-
-export const SectionHeader = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(`n-flex n-items-center`, className)} {...props} />
-));
-
-type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
-
-export const Title = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    $textStyle?: TitleTextStyle;
-  }
->(({ className, $textStyle, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `n-flex n-select-none ${
-        $textStyle
-          ? `${textStyles[$textStyle]} n-text-text`
-          : "n-font-sans n-text-label n-text-text-muted n-font-semibold"
-      } `,
-      className
-    )}
-    {...props}
-  />
-));
-
-export const Row = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(`n-flex-1 n-flex n-flex-row n-items-center`, className)}
-    {...props}
-  />
-));
-
-export const Column = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(`n-flex-1 n-flex n-flex-col n-gap-1`, className)}
-    {...props}
-  />
-));
-
-export const Checkbox = forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, ...props }, ref) => (
-  <input
-    ref={ref}
-    type="checkbox"
-    className={cx(`n-m-0 focus:n-z-interactable`, className)}
-    {...props}
-  />
-));
-
-export const Text = forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    className={cx(`n-font-sans n-text-heading5 n-font-normal`, className)}
-    {...props}
-  />
-));
-
-export const VerticalSeparator = () => (
-  <Spacer.Vertical size="inspector-v-separator" />
-);
-
-export const HorizontalSeparator = () => (
-  <Spacer.Horizontal size="inspector-h-separator" />
-);
-
-// const SliderRowLabel = forwardRef<
-//   HTMLSpanElement,
-//   React.HTMLAttributes<HTMLSpanElement>
-// >(({ className, ...props }, ref) => (
-//   <span
-//     ref={ref}
-//     className={`font-sans text-heading5 font-normal text-text-muted -mb-[6px] `, className}
-//     {...props}
-//   />
-// ));
-
-export const RowLabel = forwardRef(function RowLabel(
-  {
-    className,
-    $textStyle,
-    ...props
-  }: LabelHTMLAttributes<HTMLLabelElement> & {
-    $textStyle?: TitleTextStyle | "label";
-  },
-  ref: ForwardedRef<HTMLLabelElement>
-) {
-  return (
-    <label
-      ref={ref}
-      className={cx(
-        `n-font-sans n-text-label n-uppercase n-flex n-items-center n-leading-[19px] n-font-bold n-text-text-subtle n-z-label ${
-          $textStyle && textStyles[$textStyle]
-        } `,
-        className
-      )}
-      {...props}
-    />
-  );
-});
-
-interface LabeledRowProps {
-  id?: string;
-  children: ReactNode;
-  label: ReactNode;
-  labelTextStyle?: TitleTextStyle;
-  right?: ReactNode;
-  className?: string;
-}
-
-export const LabeledRow = memo(function LabeledRow({
-  id,
-  children,
-  label,
-  labelTextStyle,
-  right,
-  className,
-}: LabeledRowProps) {
-  return (
-    <Row id={id} className={className}>
-      <Column>
-        <RowLabel $textStyle={labelTextStyle}>
-          {label}
-          {right && <Spacer.Horizontal />}
-          {right}
-        </RowLabel>
-        <Row>{children}</Row>
-      </Column>
-    </Row>
-  );
-});
-
-// interface LabeledSliderRowProps {
-//   children: ReactNode;
-//   label: string;
-// }
-
-// export const LabeledSliderRow = memo(function LabeledSliderRow({
-//   children,
-//   label,
-// }: LabeledSliderRowProps) {
-//   return (
-//     <Row>
-//       <Column>
-//         <SliderRowLabel>{label}</SliderRowLabel>
-//         <Row>{children}</Row>
-//       </Column>
-//     </Row>
-//   );
-// });